Questions tagged «d3.js»

假设我有一个直方图脚本，可构建960 500 svg图形。如何使它响应，以便调整图形的宽度和高度是动态的？ <script> var n = 10000, // number of trials m = 10, // number of random variables data = []; // Generate an Irwin-Hall distribution. for (var i = 0; i < n; i++) { for (var s = 0, j = 0; j < m; j++) …

224 javascript  responsive-design  d3.js 

我有一段JavaScript代码，用于创建（使用D3.js）svg包含图表的元素。我想基于来自使用AJAX的Web服务的新数据来更新图表，问题是每次我单击更新按钮时，它都会生成一个新图表svg，因此我想删除旧的图表或更新其内容。 这是我创建的JavaScript函数的片段svg： var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); 如何删除旧svg元素或至少替换其内容？

200 javascript  ajax  svg  d3.js 

有人可以解释一下D3.js中datum（）和data（）之间的区别吗？我看到两者都被使用了，我不确定为什么要选择一个？

199 javascript  d3.js 

我正在用d3.js绘制散点图。借助以下问题： 获取屏幕，当前网页和浏览器窗口的大小 我正在使用此答案： var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], x = w.innerWidth || e.clientWidth || g.clientWidth, y = w.innerHeight|| e.clientHeight|| g.clientHeight; 这样我就可以将图适合用户的窗口，如下所示： var svg = d3.select("body").append("svg") .attr("width", x) .attr("height", y) .append("g"); 现在，我希望在用户调整窗口大小时可以调整图的大小。 PS：我的代码中没有使用jQuery。

183 javascript  d3.js 

我有一组要分散绘制的数据。当我将鼠标悬停在一个圆圈上时，我希望它弹出数据（例如x，y值，也许更多）。这是我尝试使用的方法： vis.selectAll("circle") .data(datafiltered).enter().append("svg:circle") .attr("cx", function(d) { return x(d.x);}) .attr("cy", function(d) {return y(d.y)}) .attr("fill", "red").attr("r", 15) .on("mouseover", function() { d3.select(this).enter().append("text") .text(function(d) {return d.x;}) .attr("x", function(d) {return x(d.x);}) .attr("y", function (d) {return y(d.y);}); }); 我怀疑我需要提供更多有关输入哪些数据的信息？

162 tooltip  mouseover  d3.js 

当前在d3中，如果您要绘制一个geoJSON对象，则必须对其进行缩放并转换以使其达到所需的大小，然后对其进行转换以使其居中。这是一个非常繁琐的反复试验，我想知道是否有人知道更好的方法来获得这些价值？ 所以例如如果我有这段代码 var path, vis, xy; xy = d3.geo.mercator().scale(8500).translate([0, -1200]); path = d3.geo.path().projection(xy); vis = d3.select("#vis").append("svg:svg").attr("width", 960).attr("height", 600); d3.json("../../data/ireland2.geojson", function(json) { return vis.append("svg:g") .attr("class", "tracts") .selectAll("path") .data(json.features).enter() .append("svg:path") .attr("d", path) .attr("fill", "#85C3C0") .attr("stroke", "#222"); }); 我该如何一点一点地获得.scale（8500）和.translate（[0，-1200]）？

140 d3.js  geojson  topojson 

我是新手D3.js，今天才开始学习 我看了甜甜圈的例子，发现了这段代码 var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); 我搜索了文档，但不了解.append("g")附加的内容 甚至D3具体吗？ 在这里寻找指导

129 javascript  d3.js 

我需要确切知道任意g元素的宽度和高度，SVG因为一旦用户单击它，就需要在其周围绘制一个选择标记。 我在互联网上看到的是这样的：d3.select("myG").style("width")。问题在于该元素将不会总是具有明确的width属性集。例如，当我在中创建一个圆时g，将r设置半径（）而不是宽度。即使我在window.getComputedStyle上使用了方法circle，它也会返回“自动”。 有没有一种方法可以计算中的任意svg隔离的宽度D3？ 谢谢。

120 javascript  d3.js 

我正在尝试选择用于更新项目的正确技术，该项目基本上在可缩放，可平移的图形中呈现数千个点。使用Protovis的当前实施效果不佳。在这里查看： http://www.planethunters.org/classify 完全缩小时大约有2000点。尝试使用底部的手柄放大一点，然后拖动以平移。您会发现它非常不稳定，除非您有一台非常快的计算机，否则您在一个内核上的CPU使用率可能会高达100％。对焦点区域的每次更改都需要重绘到原图，这相当慢，而且绘制的点数更多时更糟。 我想对界面进行一些更新，并更改底层的可视化技术，以更好地响应动画和交互。从下面的文章来看，似乎是在另一个基于SVG的库还是一个基于画布的库之间进行选择： http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/ d3.js源自Protovis，它是基于SVG的，被认为在渲染动画方面更好。但是，我对性能有多好以及性能上限有疑问。因此，我也在考虑使用基于画布的库（例如KineticJS）进行更全面的大修。但是，在我深入研究一种或另一种方法之前，我想听听有人用如此大量的数据完成了类似的Web应用程序，并征求了他们的意见。 最重要的是性能，其次是增加其他交互功能和对动画进行编程的重点。一次最多可能不会超过2000个点，每个点上都有很小的误差线。放大，缩小和平移需要平滑。如果最新的SVG库在这方面是不错的，那么使用d3的便利性可能会超过KineticJS等的增加的设置。但是，如果使用canvas具有巨大的性能优势，尤其是对于计算机速度较慢的人，那么我绝对会喜欢这样。 NYTimes使用SVG制作的应用示例，但仍可以流畅地进行动画设置：http：//www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html 。如果我可以获得这种性能，而不必编写自己的画布绘制代码，则可能会选择SVG。 我注意到有些用户使用了d3.js操纵与画布渲染相结合的方式。但是，我在网上找不到有关此文档的大量文档，也无法与该帖子的OP联系。如果任何人有执行这种DOM到画布（演示，代码）实现的经验，我也希望听到您的来信。似乎可以操纵数据并可以自定义控制如何呈现数据（因此可以提高性能），这似乎是一种很好的混合方式，但是我想知道是否必须将所有内容加载到DOM仍然会减慢速度。 我知道存在一些与此问题类似的问题，但没有一个问题完全相同。谢谢你的帮助。 后续：我最终使用的实现位于https://github.com/zooniverse/LightCurves

114 html  canvas  svg  d3.js  kineticjs 

谁能推荐一个可以进行交互式图形可视化的Python库？ 我特别想要d3.js之类的东西，但python理想情况下，它也是3D的。 我看了看： NetworkX-仅做Matplotlib图，而那些图似乎是2D的。我没有看到任何形式的交互性，例如d3.js提供的交互性。 graph-tool-它仅执行2D绘图，并且交互式图形非常慢。

110 python  graph  d3.js  graph-tool 

svg的x和dx属性（或y和dy）有什么区别？什么时候才是使用轴移属性（dx）和位置属性（x）的合适时间？ 例如，我注意到很多d3示例都做了这样的事情 chart.append("text") .attr("x", 0) .attr("y", 0) .attr("dy", -3) .text("I am a label") 当以下内容似乎做相同的事情时，同时设置y和dy的优点或理由是什么？ chart.append("text") .attr("x", 0) .attr("y", -3) .text("I am a label")

106 svg  d3.js 

关闭。此问题不符合堆栈溢出准则。它当前不接受答案。 想改善这个问题吗？更新问题，使其成为Stack Overflow 的主题。 6年前关闭。 改善这个问题 我看到了D3.js，我很感兴趣，所以我买了这本书！我可能是错的，但是我发现它没有实现。 有谁拥有掌握D3.js数据可视化的主要材料？ 我看到了很多潜力，D3.js而且我非常热衷和感兴趣。 提前致谢！ 更新： 我刚刚读完Scott Murray撰写的《网络交互式数据可视化》，非常棒！试试看，它是免费的。

104 javascript  d3.js  data-visualization 

参考此示例： http://vallandingham.me/stepper_steps.html D3和jQuery库似乎都非常相似，因为它们都以对象链接方式进行DOM操作。 我很想知道D3比jQuery更容易实现哪些功能，反之亦然。有很多以jQuery为基础的图形和可视化库（例如，高图， 海军报， 威莫）。 请举例说明它们之间的不同之处。

103 javascript  jquery  d3.js 

我需要使用D3.js制作FadeOut方法（类似于jQuery）。我需要做的是使用将不透明度设置为0 transition()。 d3.select("#myid").transition().style("opacity", "0"); 问题是我需要一个回调来实现转换完成的时间。如何实现回调？

98 javascript  d3.js  transition 

如何在d3中的轴上添加文本标签？ 例如，我有一个带有x和y轴的简单线图。 在我的x轴上，我打勾的范围是1到10。我希望单词“ days”出现在它的下面，以便人们知道x轴是在计算天数。 同样，在y轴上，我用数字1-10作为刻度，我希望“吃的三明治”一词出现在侧面。 有没有简单的方法可以做到这一点？

94 javascript  d3.js  axis-labels