Tag: d3.js

d3.js – 添加新节点后图形被破坏

我使用以下逻辑构建下面的图形： 鼠标hover节点 – 它是非连接节点及其链接是透明的。 鼠标hover链接 – 所有节点和链接都是透明的，除了触摸的链接（变为粗体），它是两个节点。 这很有效，直到我尝试向图表添加更多节点。 按“ 添加节点”按钮，添加另一个节点，并将其链接到聚会。 问题是，节点逻辑被破坏（链接逻辑仍然有效）。 知道为什么吗？ 谢谢！ 的jsfiddle function removeNodePopup() { $(“#nodePopup”).remove(); } function showNodePopup(node) { removeNodePopup(); if (!node[‘data’]) { return; } var data = node[‘data’]; var htmlStr = ”; htmlStr += ”; htmlStr += ‘ ‘; htmlStr += ‘ ‘ + data[‘name’] + ”; if (data[‘desc’]) { if […]

使用D3.JS绘制图形

我正在尝试使用D3.js绘制图形。 file.json是我的JSON文件。 日期时间应该在X轴中，销售应该在Y轴中。 这是我的JSON结构， [ { Date : “2017-12-17 18:30:01”, Sales : “50” }, { Date : “2017-12-17 17:30:00”, Sales : “20” }, { Date : “2017-12-17 16:30:00”, Sales : “10” } ] 我想绘制图表日期与销售数量。 这是我的JS： – .line { fill: none; stroke: steelblue; stroke-width: 2px; } d3.json(“file.json”, function(data) { var canvas = d3.select(“body”).append(“svg”) .attr(“width”, 500) .attr(“height”, […]

D3：显示网络到达布局，然后停止强制

我试图让我的D3网络在达到一个漂亮的布局（alpha达到0）后冻结。 我希望力完全停止，即使拖动节点（用户应该能够手动重新排列节点）。 我想我知道如何通过修改mousedown和mouseup为节点调用的函数来完成第二部分。 但是，我无法获得原始布局和冻结工作。 我查看了“静态”强制布局的示例，其中仅在布局完成后才显示网络。 但是，我希望网络能够在达到稳定布局时显示。 我将此添加到绘制网络的函数的末尾： while (force.alpha() >0.005) { force.tick(); } force.stop(); 通过此添加，网络不会显示，直到它到达force.stop() 。 有没有人知道如何在它“滴答作响”时让它显示出来？ 编辑：这是我的tick函数的实现： function tick(e) { console.log(force.alpha()); if (force.alpha() <0.05) { force.stop(); } var h = svgH; if (e.alpha < 0.05) { var q = d3.geom.quadtree(nodes), i = 0, n = nodes.length; while (++i < n) { q.visit(collide(nodes[i], e.alpha)); } […]

堆积的条形图反转

我没什么问题。 我创建了一个条形图，你可以在这个链接上看到它： Stacked Bar Chart 问题是，如果你刷新这个页面2-3次，它会反转条形图： 为什么会这样？ 我该如何解决？ 谢谢！！ 和此链接中的CSV文件 ： CSV文件

d3弧图 – 添加顶部半圆

http://jsfiddle.net/pRkpL/和http://fiddle.jshell.net/pRkpL/show/ 我正在制作一个基于这个演示的弧形图： http ： //bl.ocks.org/sjengle/5431779 。 我花了一段时间才到达这个阶段，现在图表以我需要的所有方式适应数据。 但是，我有两个问题： 1）我需要创建2个弧形图 – 一个在黑色矩形上方（代码中称为桶），下面一个。 作为临时修复，我使用css3 3D变换在x轴上翻转其中一个弧形图，但浏览器支持最多只是片状。 它确实有效，只在Chrome中运行，有时您必须刷新，打开开发工具，或调整小提琴框架的大小才能启动它。我想用d3正确地完成它。 我认为创建红色弧线的代码（圆圈的下半部分）是这样的： var radians = d3.scale.linear() .range([Math.PI / 2, 3 * Math.PI / 2]); 我发现如果我删除了最后一个/ 2它显示一个完整的圆圈，但我不能让它只显示我的drawTop函数的上半部分。 2）我目前为2个圆弧图， drawTop和drawBtm复制了2个大函数。 两者之间的唯一区别是数据数组（ good_jumps和bad_jumps ），容器ID和上面的弧度逻辑，如果可以解决的话。 有没有办法将这些结合成一个所以我不是在重复逻辑？ 我对JS很新，所以如果代码中有任何明显的错误，请告诉我:)另外，没有可能改变json，因为它来自外部api。

如何将位图嵌入D3js生​​成的SVG代码？

在访问合适的topojson和bitmaps的情况下，我使用topoJSON文件通过D3js生​​成SVG viz。 然后我通过以下方法将位图附加到它： // Append bitmap svg.append(“image”) .attr(“xlink:href”, “./myimage.png”) .attr(“width”, width) .attr(“height”, height) .attr(“class”, “bg”); 但这实际上只是添加了一个图像链接。 此外，当我选择dataviz DOM并将其保存为SVG时，我没有位图二进制文件，只有位图的链接。 是否有可能，以及如何通过D3js或javascript将我的.png二进制文件真正嵌入到我的SVG DOM中？ 另请参阅： https ： //rugger-demast.codio.io/front/_location_map-en-wikiatlas.html ，您可以尝试下载SVG。

如何在调用时使用键盘侦听器触发工具提示？

我有一个简单的饼图 。 单击饼形楔形时，将显示该楔形的工具提示。 我正在尝试实现相同的function，但在饼图的div元素OUTSIDE上。 场景： 专注于“Cat 1”div和点击输入的用户显示Cat 1楔形的工具提示 专注于“Cat 2”div和点击输入的用户显示Cat 2楔形的工具提示 专注于“Cat 3”div和点击输入的用户将显示Cat 3楔形的工具提示 我尝试过以下方面的事情： function ShowTooltip() { d3.selectAll(‘.nvtooltip’).each(function(){ this.style.setProperty(‘display’, ‘block’, ‘important’); }); }; 但是，如果你在plunkr中看到，那不会触发任何东西。 如何让这些潜水触发相应的工具提示？ $(document).keydown(function(event) { // Capture only if enter key is pressed and .myDiv has focus if (event.keyCode === 13 && $(‘.cat-count’).is(‘:focus’)) { console.log(‘do something’); ShowTooltip(); } });

将CSV转换为JSON – jQuery

我正在尝试将数据从csv转换为json，但我希望数据遵循某种层次结构。 这是我的CSV link,model,role,access link1,model1,role1,true link1,model1,role2,true link1,model1,role3,true link1,model1,role4,true link1,model2,role1,false link1,model2,role2,false link1,model2,role3,false link1,model2,role4,false link2,model1,role1,false link2,model1,role2,true link2,model1,role3,false link2,model1,role4,true link2,model2,role1,false link2,model2,role2,true link2,model2,role3,false link2,model2,role4,true 预期结果 “link1”: { “model1”: { “role1”: true, “role2”: true, “role3”: true, “role4”: true, }, “model2”: { “role1”: false, “role2”: false, “role3”: false, “role4”: false, } }, “link2”: { “model1”: { “role1”: false, “role2”: true, “role3”: false, […]

dc.js – 减少从单选按钮中选择的function

在过去的几周里，我在尝试创建一个简单的个人仪表板时，一直在玩dc.js。 我设法实现了一个弹出菜单来选择我想用来分组lineChart的时间维度的时间粒度，并感谢社区的帮助，我设法大大提高了性能。 现在我试图动态更改我对分组数据执行的聚合类型（总和，平均值，模式，最小值和最大值）。 我发现这个例子非常有帮助，但是，尽管如此，我并没有完全适应我的情况而且我无法使其工作。 根据我的理解，在这种情况下，我只需要更改值访问器function然后重新绘制。 实际上，valueAccessor确定了y轴像素的位置，因此它是唯一应该改变的部分。 相反，当我处理组聚合的变化时，我不得不用新的分组重新设置整个图表…… 现在这里是我的代码，导致任何单选按钮位置都没有打印（只有sum和svg实现）。 如果我删除动态valueAccessor部分，默认的“sum”选项可以正常工作。 这是代码： // Disable it or dash_reduceAvgAdd will give an error with ++p! //’use strict’; // TODO temp dirty workaround var selectedAggr = ‘sum’; // ### Create Chart Objects // Create chart objects associated with the container elements identified by the css selector. // Note: It is […]

SVG D3滚动最大高度

我有一个非常简单的ui，在一个带有max-height的滚动div容器上添加了一堆rect。 https://jsfiddle.net/bikrantsharma/eqnnd84v/ .legend-main-div { padding: 2%; height: 150px; overflow-y: scroll; border: 1px solid blue; } 它只展示了几个svg项目。 如何以最大高度显示容器中的所有物品？