svg相关内容

D3 树布局 - 当孩子超过一定数量时自定义垂直布局

我正在尝试使用 D3 树布局来创建各种家谱,我注意到的一件事是当我有很多子节点时,它会在屏幕上水平延伸.理想情况下,我希望这些节点采用更垂直的布局,这样人们就不必在屏幕上滚动,而可以继续向下看树. 这是我目前看到的: 现在可能没那么糟糕,但如果我说有 20 个孩子,它会跨越整个屏幕,这是我想要避免的. 我见过类似这个 但这对我没有帮助,因为我想要一个特定的布局而不是简单的调整大小 ..
发布时间:2021-12-18 19:39:55 前端开发

将文本包裹在圆圈内

我正在使用 d3 绘制 UML 图,并希望将文本包裹在使用 d3 绘制的形状内.我已经得到了下面的代码,但找不到使文本“适合"我的形状的解决方案(见下图). var svg = d3.select('#svg').append('svg').attr('宽度', 500).attr('身高', 200);var global = svg.append('g');global.append('圆圈 ..
发布时间:2021-12-18 19:39:32 前端开发

如何防止 SVG 标记(箭头)继承路径的笔画宽度?

我有不同边缘厚度的箭头,但是我希望箭头(svg 标记)具有相同的大小,即不根据路径的笔划宽度调整大小.我能做什么? svg.append("svg:defs").selectAll("marker").data([“诉讼", “许可", “已解决"]).enter().append("svg:marker").attr("id", 字符串).attr("viewBox", "0 -5 10 10 ..
发布时间:2021-12-18 19:39:17 其他开发

将 DOM 元素附加到 D3

我使用 D3 在 SVG 上绘图.我想要的是将 DOM 元素或 HTML 附加到 D3,例如: task.append(function(model){//这里返回html或dom}; 文档说这是可能的,但不幸的是我找不到任何示例或自己找到了如何做到这一点. 解决方案 selection.append() 函数接受以下两种类型之一: 一个字符串,它是要创建的元素的名称,或者 一 ..
发布时间:2021-12-18 19:39:06 前端开发

d3 力导向树上的曲线

刚接触 d3 并尝试开发一个力导向树,我们可以将 varioss 数据集插入其中.我已经设法让基本的想法启动并运行,但想让链接弯曲,这样我就可以处理多个链接.我查看了 http://bl.ocks.org/1153292,但我只是不明白.我得到的最接近的是所有工作都没有可见的路径.这是我的直线代码,如果您有时间,我将不胜感激 谢谢: //设置保存数据结构的svg,放到名为mapBox的di ..
发布时间:2021-12-18 19:36:56 前端开发

未关闭的 SVG 路径似乎已关闭

我正在用 d3 写一些东西,我遇到了一个奇怪的问题.封闭的路径以 'Z' 字符结尾,但无论我是否包含 Z,我制作的每条路径都会关闭(并填充).即使单独使用从规范中复制的示例,也会发生这种情况.例如: 我对可能是什么问题感到困惑.如有任何见解,我将不胜感 ..
发布时间:2021-12-18 19:34:19 前端开发

在 D3.js 中实时绘制线条

我刚开始使用 D3.js,我想创建一些类似于我们在 Paint 中所做的画线.步骤应该是一样的:- 单击屏幕上的一个点- 拖动到目的地以创建一条线. 我现在遇到的问题是,当您将鼠标拖动到目的地时,线条应该根据您的鼠标移动.我该怎么做? 谢谢. 解决方案 这是一个简单的例子.另请参阅实时版本. var 行;var vis = d3.select("body").append(" ..
发布时间:2021-12-18 19:33:52 其他开发

是否可以在 d3.js 中导入 svg 形状?

使用 d3.js 的第一天,进展顺利,但我需要将我的占位符圆形更改为稍微复杂一些的形状. 我在 Illustrator 中创建的 SVG 形状可以“导入"到 d3.js 图表中吗? 我知道我可以在 d3 中重新绘制它...但我现在头疼...呃... 这是一个带点的简单气泡: ..
发布时间:2021-12-18 19:33:21 其他开发

如何访问与 D3 SVG 对象相关的 DOM 元素?

我正在尝试通过使用他们的基本气泡图之一来学习 D3.第一个任务:弄清楚如何拖动气泡并使其在拖动时成为最上面的对象.(问题是让 D3 的对象模型映射到 DOM,但我会到达那里...) 要拖动它,我们可以使用他们提供的代码简单地调用 d3 的拖动行为: var drag = d3.behavior.drag().on(“拖动开始",拖动开始).on("拖动",拖动移动).on("dragend ..
发布时间:2021-12-18 19:32:54 其他开发

d3 中带有弯头连接器的树/树状图

我对 d3.js(以及一般的 SVG)非常陌生,我想做一些简单的事情:带有角度连接器的树/树状图. 我已经从这里蚕食了 d3 示例:http://mbostock.github.com/d3/ex/cluster.html我想让它更像这里的 protovis 示例: http://mbostock.github.com/protovis/ex/indent.html http://m ..
发布时间:2021-12-18 19:32:42 前端开发

d3.js 中的默认 SVG 位置

我想了解为什么默认情况下我的 SVG 位于 外部 SVG 容器元素而不是 x:0/y0 坐标? CSS:最小(没有 CSS 的情况下,只删除了文档正文的边距/填充) Javascript: var svg = d3.select('div#map').append('svg:svg');svg.append('svg:g').append('svg:text').text('你好词' ..
发布时间:2021-12-18 19:29:00 其他开发

如何在 d3.js 中反转网格

嗨,我画了一个有 5 条 x 线和 5 条 y 线的网格.问题是,在 svg 中,y 方向向下下降,所以我的网格 y 线向下下降,为了使网格向上方向,我在此之后为 y 给出了 -ve 值,例如 (0,-50,-100,-150,-200)我得到了我的期望,但我不需要 -ve y 的值.我怎样才能得到向上的 y 线我正在努力做第二个? var Y = [0,50,100,150,200];va ..
发布时间:2021-12-18 19:28:37 其他开发

带有 Y 值跟踪的 D3.js 多系列图表

可行的解决方案:现在我正在设计样式并解决一些与我创建由多个数据系列和值跟踪组成的图表有关的问题.如果有人遇到与我相同或类似的问题,我会尽快尝试为您提供工作代码示例,可以将其作为基础工作.目前我使用的大部分技巧都在下面的评论中. 这将是我在 StackOverflow 上的第一个问题,我很期待看到您对我的问题可能有什么答案. 最近我得到了一个项目,我必须在其中编写用于生成图表的 Java ..
发布时间:2021-12-18 19:28:28 前端开发

数据中具有相同值的 d3 比例错误使用?

我是 d3 的新手,我用它来创建一个使用数字数组的简单图表,其中值“16"在其中出现两次. 它为第二个 '16' 值生成了一个 'missing' 'rect' 元素的图表,当我检查 html 时,我看到两个 '16' rect 的 'y' 值都相同,为 72. 请告诉我我做错了什么,谢谢 代码: var 数据 = [4, 8, 15, 16, 23, 16];var char ..
发布时间:2021-12-18 19:28:03 前端开发