草庐IT

javascript - 如何在 D3 图表的标签中包含换行符?

我正在使用D3生成条形图(我改编了来自thisexample的代码)。我在x轴上使用的标签每个都有几个字长,因为这会使所有标签重叠,所以我需要跨行打断这些标签。(如果我能用换行符替换每个标签中的所有空格就好了。)我最初通过用文字换行符( )替换空格并设置xml:space="preserve"来尝试此操作在标签上元素。不幸的是,事实证明SVG不尊重这个属性。接下来,我尝试将每个单词包装在中。我以后可以设计风格。我通过这个函数传递了每个标签:function(text){return''+text.replace(//g,'')+'';}但这只是字面意义上的s进入输出。如何将文本

javascript - D3 将文本附加到 SVG 矩形

我希望将html附加到D3中的矩形上,以提供多行工具提示。底部是我如何添加一个矩形,这可能是问题的一部分。顶部是应该在我的世界中工作的代码。newRect.().html("Test"+""+"Test2");它确实在SVG中插入了一个文本字段,只是不显示:HTML:TestTest2我有一个鼠标悬停功能,它运行以下命令:newRect=svg.append("rect").attr("x",xCor).attr("y",yCor).attr("width",130).attr("height",160).attr("fill","red").attr("id","rectLabel"

javascript - 了解 D3.js 如何将数据绑定(bind)到节点

我正在通读D3.js文档,发现它很难理解theselection.datamethod从文档中。这是文档中给出的示例代码:varmatrix=[[11975,5871,8916,2868],[1951,10048,2060,6171],[8010,16145,8090,8045],[1013,990,940,6907]];vartr=d3.select("body").append("table").selectAll("tr").data(matrix).enter().append("tr");vartd=tr.selectAll("td").data(function(d){re

javascript - 在 D3 力导向图中突出显示所选节点、其链接及其子节点

我正在研究D3中的力导向图。我想通过将所有其他节点和链接设置为较低的不透明度来突出显示鼠标悬停的节点、其链接及其子节点。在这个例子中,http://jsfiddle.net/xReHA/,我能够淡出所有链接和节点,然后淡入连接的链接,但是,到目前为止,我还无法优雅地淡入作为当前鼠标悬停节点的子节点的连接节点。这是代码中的关键函数:functionfade(opacity){returnfunction(d,i){//fadeallelementssvg.selectAll("circle,line").style("opacity",opacity);varassociated_lin

javascript - d3.js 和 chart.js 对比(仅针对图表)

关闭。这个问题需要更多focused.它目前不接受答案。想改进这个问题吗?更新问题,使其只关注一个问题editingthispost.关闭2年前。Improvethisquestion我在我的项目中多次使用过chart.js,但我从未使用过d3.js。很多人说d3.js是最好的图表javascript框架,但没有人能够解释原因,尤其是当我想与chart.js进行比较时。我找到了这个:http://www.fusioncharts.com/javascript-charting-comparison/但这不是我想要的。有谁知道这些框架在可用性和性能方面的比较(仅针对图表)?

javascript - 使用 D3 更新 SVG 元素 Z 索引

使用D3库将SVG元素置于z顺序顶部的有效方法是什么?我的具体场景是一个饼图,它在鼠标悬停在给定部分上时突出显示(通过向path添加stroke)。生成图表的代码块如下:svg.selectAll("path").data(d).enter().append("path").attr("d",arc).attr("class","arc").attr("fill",function(d){returncolor(d.name);}).attr("stroke","#fff").attr("stroke-width",0).on("mouseover",function(d){d3.se

javascript - Protovis 与 D3.js

TLDR:有没有人同时使用过protovis和D3.js来说明两者之间的区别?过去2周我一直在使用protovis,到目前为止效果非常好。除了现在我似乎在动画方面遇到了一些障碍。原型(prototype):http://vis.stanford.edu/protovis/我想做一些非常简单的动画,但使用protovis感觉不够直观——我开始认为protovis从来就不是真正的动画。所以,我开始研究D3.js:http://mbostock.github.com/d3/ex/stack.html看起来很像,但是:看起来更轻盈似乎适合与其他DOM元素以及SVG交互似乎适合添加动画谁能阐明任

javascript - d3 轴标记

如何在d3中向轴添加文本标签?例如,我有一个带有x轴和y轴的简单折线图。在我的x轴上,我有从1到10的刻度。我希望“天”这个词出现在它下面,这样人们就知道x轴在计算天数。同样,在y轴上,我将数字1-10作为刻度线,我希望“sandwicheseaten”这个词出现在侧面。有没有简单的方法可以做到这一点? 最佳答案 轴标签不是内置于D3的axiscomponent,但您可以通过添加SVGtext元素来自己添加标签。一个很好的例子是我对Gapminder的动画气泡图的再创造,TheWealth&HealthofNations.x轴标签如

javascript - 一本学习 D3.js 的好书

关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于StackOverflow来说是偏离主题的,因为它们往往会吸引自以为是的答案和垃圾邮件。相反,describetheproblem以及迄今为止为解决该问题所做的工作。关闭9年前。Improvethisquestion我看到了D3.js并且很感兴趣所以我买了这个book!我可能是错的,但我发现它并不令人满意。有没有人有掌握D3.js数据可视化的主要Material?我可以看到D3.js的巨大潜力,我非常热衷和感兴趣。提前致谢!更新:我刚看完Inter

javascript - D3.js:如何获取任意元素的计算宽度和高度?

我需要准确知道SVG中任意g元素的宽度和高度,因为一旦用户单击它,我就需要在它周围绘制一个选择标记.我在网上看到的是这样的:d3.select("myG").style("width")。问题是元素不会总是有明确的宽度属性集。例如,当我在g中创建一个圆时,它将设置半径(r)而不是宽度。即使我在circle上使用window.getComputedStyle方法,它也会返回“auto”。有没有办法计算D3中任意svg元素的宽度?谢谢。 最佳答案 对于SVG元素使用像selection.node().getBBox()这样的东西你会得到