草庐IT

D3Blocks

全部标签

javascript - D3力有向图,根据给定的数据和值不同的形状?

我制作了一个力导向图,我想更改包含"entity":"company"的数据的节点形状,以便它们具有矩形形状,而另一个没有此部分的数据将像现在一样是圆圈。您可以在此处看到我的工作示例,其中只有圆形节点:http://jsfiddle.net/dzorz/uWtSk/我尝试在部分代码中使用ifelse语句添加矩形,我将形状附加到节点,如下所示:function(d){if(d.entity=="company"){node.append("rect").attr("class",function(d){return"nodetype"+d.type}).attr("width",100)

javascript - 多行D3折线图轴文本标签

Ihavealinechartbuiltind3.js.我需要一些定制方面的帮助。我希望将x轴文本标签分成两行。我想要一行中的日期和另一行中的月份。目前的图表在一行中有“14Dec”。当前图表:x轴标签在这里分成两行。2行不同的日期和月份。预期的x轴:CodepenlinkvarxScale=d3.time.scale().domain([data[0][xkeyVal],data[data.length-1][xkeyVal]]).range([margin.left,width]);varyScale=d3.scale.linear().domain([0,d3.max(data,

javascript - 缩放 D3 强制布局链接标记上的箭头

我在d3力定向图中有以下代码,我试图根据值(从1-3)改变链接及其关联箭头的大小。笔划粗细确实随值而变化,但箭头不会停​​留在正确的位置。当笔划粗细从1变为3时,它往往会从末端向后移动。关于如何在更改笔划值时使箭头(标记)正确对齐有什么想法吗?非常感谢!varlink=vis.selectAll("line.link").data(json.links).enter().append("svg:line").attr("class","link").style("stroke-width",function(d){returnMath.sqrt(d.value);}).attr("x1

javascript - D3 平移缩放溢出

我想知道您是否可以帮助我使用以下fiddle中的以下D3js缩放和平移功能:http://jsfiddle.net/moosejaw/nUF6X/5/我希望代码(虽然不是很好)是直截了当的。我有一个图表,其中包含总染色体长度乘以总染色体长度。刻度值是每条染色体的个体长度(总长度)。刻度线被格式化为染色体的名称(以便最终用户看起来好看)。我遇到的问题是:x轴和y轴标签延伸到图形区域之外。当我没有明确提供刻度值时,标签会“消失”。见:varyAxis=d3.svg.axis().scale(y).orient("left").tickValues(tickValues).tickForma

javascript - D3.js 强制布局 - 边缘标签放置/旋转

我是D3.js的新手,我一直在研究强制布局。我尝试过的其中一件事是在链接上放置标签。一种方法是附加svg:text并手动计算translate&rotate,这对直线很有效。但是,如果链接是svg:path(例如arc),这将无法按预期工作。在这些情况下,svg:textPath是建议的解决方案。在thisdemo,您可以看到通过svg:textPath为链接添加标签的简单实现。唯一的问题是,如果源位于目标的右侧,文本将以相反的方向呈现(从我们的Angular来看,从路径的Angular来看它仍然是正确的)。我的问题是,如何处理这个问题?我想出的唯一“解决方案”是,在上述情况下手动交换

javascript - d3 桑基图中的排序节点

我正在尝试对D3sankey中的节点进行排序。我希望将具有较大值的节点绘制得更高。这是相关代码(basedond3noob'scode)片段,我在其中尝试通过使用D3的内置排序功能来实现我想要的。结果不是我所期望的。在检查sankey.js后,我并不完全清楚插件如何对节点进行排序。任何有关该主题的建议将不胜感激。//setupgraphinsamestyleasoriginalexamplebutemptygraph={"nodes":[],"links":[]};data.forEach(function(d){graph.nodes.push({"name":d.source});

javascript - 转换转换的 d3 转换不适用于 DIV

为什么转换属性不适用于D3中的DIV?它适用于任何svg元素,但不适用于“div”。任何替代解决方案?不工作d3.select("div").transition().style("transform","translate(0px,-500px)");工作d3.select("circle").transition().style("transform","translate(0px,-500px)"); 最佳答案 如前所述,d3不支持开箱即用的HTML元素的CSS3转换转换。您必须创建一个自定义字符串插值器来为您做这件事。注意:

javascript - 在 d3.js v4 中重新绑定(bind)导出

我正在使用模块系统创建map。我或多或少习惯了D3.jsv3,但我仍然习惯了v4。我正在尝试添加一个调度,但我不知道如何在V4中重新绑定(bind)导出,因为这个功能现在不可用。因此对于我的分派(dispatch)(_dis)和我的特定事件(“changetype”),d3v3中的重新绑定(bind)将在返回导出之前进行,例如:d3.mapDots=function(districts){var_dis=d3.dispatch('changetype');(...)exports.color=function(_c){if(!arguments.length)returncolor;c

javascript - 使用Web Worker和D3.js异步生成图?

我目前正在解决一个问题,该问题要求我的Web应用程序生成一个代表大约50k到60k数据点的图表。它加载速度相当快(约6秒),但我想知道是否可以使用D3.js在WebWorker中生成图形,然后将SVG传回以加载到页面中。 最佳答案 WebWorker没有DOM访问权限,因此您在这方面所能做的就是构建可用于快速创建DOM的东西。例如,工作人员可以处理数据集并进行所有繁重的计算,然后将结果作为一组数组传回。 关于javascript-使用WebWorker和D3.js异步生成图?,我们在St

javascript - D3树垂直分离

我使用的是D3树布局,例如:http://mbostock.github.com/d3/talk/20111018/tree.html我已根据需要对其进行了修改,但遇到了问题。这个例子也有同样的问题,如果你打开了太多的节点,它们就会变得紧凑,使阅读和交互变得困难。我想在重新调整舞台大小时允许这样的间距的同时定义节点之间的最小垂直空间。我尝试修改分离算法使其工作:.separation(function(a,b){return(a.parent==b.parent?1:2)/a.depth;})那没用。我还尝试计算哪个深度有最多的child,然后告诉舞台的高度为children*spac