Tag: d3.js

当字体大小低于1px时，SVG文本路径点击半径太高: 我在D3.js中创建了一些河流，并希望它们可以点击。所以我创建了一个例子jsfiddle.net/kwoxer/5uc17jwr/19/ 。在那里你可以看到河流的鼠标hover总体上是好的。但问题是当字体大小低于1px （例如River 9和River 10）时，它就不再正确了。不知何故，鼠标hover是错误的，半径太高了。因此，在font-size 1px下面，您实际上可以将鼠标移离文本，并且河流文本仍然会突出显示。我想知道为什么它低于1px以及如何解决这个问题。也许如果有一些禁用outerRadius？问题例子我希望红色和蓝色标记与事件。红色的将突出11河，蓝色的突出19河：这几乎是同一个问题，但另一个案例。因此，当河流的字体大小太小时，蓝色区域也会切换突出显示。我想禁用该行为：

如何在创建x轴时强制d3js花费数小时的时间？: 小提琴： http ： //jsfiddle.net/8eba8q33/2/ 我的x轴是时间刻度 var x = d3.time.scale().range([0, width]); 在x轴上，如果我的json数据中有10个值，我希望能够正好有10个刻度。我的json数组包含以下对象： CurrentQuantity: 20 LastUpdated: Thu Jan 15 2015 13:09:30 GMT+0100 (Romance Standard Time) 当我想为x轴创建一个域我试图这样做： x.domain(d3.extent(data, function(d) { return d.LastUpdated; })); 但由于某些原因上面的代码不需要花费几分钟和几秒钟，所以如果我有多个对象，其中LastUpdated是相同的，但差异是在小时或分钟，规模将不会显示它，因为情节最终在顶部彼此的。我如何强制xAxis考虑小时，分钟和秒？

更新数据时NVD3 Graph的奇怪function: 我有一些使用d3 / nvd3的图表。我现在想要能够通过单击按钮更新图表数据，我已经让它工作了90％但是当我更新数据时，function变得不一致。我的意思是可点击的图例停止正常工作，通常你可以双击其中一个，它会挑出数据。我想某种方式，当数据更新时，它的内存中仍然存在旧数据，这会导致一些问题吗？这是我的javascript – $( document ).ready(function() { var negative_test_data = [{“key”:”O1″,”values”:[{“x”:”NRW “,”y”:1},{“x”:”WFW “,”y”:3}]},{“key”:”O2″,”values”:[{“x”:”MED “,”y”:1},{“x”:”FSEST “,”y”:1},{“x”:”SW “,”y”:1},{“x”:”LW “,”y”:4}]},{“key”:”O3″,”values”:[{“x”:”SEEG “,”y”:1},{“x”:”DLRW “,”y”:1},{“x”:”SEM “,”y”:1},{“x”:”DEN “,”y”:1},{“x”:”LEW “,”y”:3}]},{“key”:”O4″,”values”:[{“x”:”BUC “,”y”:2}]}]; var chart; nv.addGraph(function() { chart = nv.models.multiBarChart() .color(d3.scale.category10().range()) .rotateLabels(0) //Angle to rotate x-axis labels. .transitionDuration(200) .showControls(false) //Allow user to switch between ‘Grouped’ and ‘Stacked’ mode. .groupSpacing(0.24) //Distance […]

操纵d3网络图: 我有关于d3网络图的问题。说我有一个简单的，一个像我这里的jsFiddle 输入链接描述这里，图。并且Id喜欢有一个function，例如删除中间圆并连接第一个和第三个。有人可以帮我这个吗？ [[‘L1’, ‘L2’], [‘L2’, ‘L3’]] 可能它不会被“硬删除”，但隐藏或不显示？因为我也想知道如何将中间的，删除的圆圈和原始图表带回来。理想情况下，我希望有人帮我提供两个function的片段，其中一个将删除中间圆圈，另一个（按下按钮）会将其恢复。此外，我们可以假设每个圆圈都有一个id，并且它们之间的连接也会有ID，如果这样会让事情变得更容易。

如何将数据传递给c3图: 这是我的JS代码： var abc = JSON.stringify(dataObject); var chart = c3.generate({ bindto: ‘#container’, data: { json: abc, keys: { x:’_id’, value: [‘a’, ‘b’,’c’,’d’], }, axis: { x: { type: ‘timeseries’, } } } }); 上面的代码给出了错误： undefined is not a function. 但是，如果我直接直接提供相同的数据而不存储在变量中，则代码可以正常工作。请让我知道错误是什么。

如何在单个html页面中将多个svg转换为png？: 我使用d3和venn.js来创建这个维恩图。代码在这里：Svg实际上是通过这些脚本在div venn2中创建的。 var sets = [ {sets:[“A”], size: 12, label: “A”}, {sets:[“B”], size:12, label: “B”}, {sets: [“A”, “B”], size: 4, label: “AB”} ]; var chart = venn.VennDiagram() .wrap(false) .fontSize(“14px”) .width(400) .height(400); function updateVenn(sets) { var div = d3.select(“#venn2”).datum(sets); var layout = chart(div), textCentres = layout.textCentres; div.selectAll(“.label”).style(“fill”, “white”); div.selectAll(“.venn-circle path”).style(“fill-opacity”, .6); return layout; } 我在这里通过canvas将svg转换为png的脚本。 […]

d3圆环图在移动视图中不完全可见: 我正在使用d3圆环图显示一些数据，如下所示，但是当我切换到移动视图时，图表无法正常显示如何使其工作或使其在移动视图中显示整个甜甜圈和详细信息？ var width = $(“.chart-time-spent”).width(), height = 250, radius = Math.min(width, height) / 2, legendPosY = (height / 2) – 20; var color = d3.scale.ordinal().range([“#99ecf0”, “#1cb5bb”, “#10538c”, “#75c6f3”, “#60d3ff”, “#4ec3d7”, “#37c2a5”, “#8bcb6b”]); var API = apiUrl+”getDeviceCounters”; console.log(“deviceController api_> “+API); var arc = d3.svg.arc().innerRadius(radius – 20).outerRadius(radius – 60); var arcOver = d3.svg.arc().outerRadius(radius – 18).innerRadius(radius – 62); […]

如何使用d3.js选择为每个数据元素创建多个相邻节点: 使用以下数据： var days = [“Sun”, “Mon”, “Tues”, “Wed”, “Thur”, “Fri”, “Sat”]; 我需要将html结构变为： Sun Mon …. Etc 目前我当前失败的解决方案是： var selection = d3.select(“div”); var enter = selection.selectAll(“input”).data(days).enter() enter.append(“input”) .attr(“type”,”checkbox”) .attr(“id”,function(d,i){ return “day”+i;}) enter.append(“label”) .attr(“for”,function(d,i){ return “day”+i;}) .text(function(d,i){return daysAbbr[i];}) 这给了我一个不正确的dom： …. Etc Sun Mon …. Etc 我将如何创建所有这些相邻的兄弟姐妹？

jQuery滑块不工作在d3倍数，但也没有返回错误: 我正在尝试将jQuery范围滑块添加到包含小倍数面积图的页面上的主图表中，但滑块不会滑动，并且图表不会转换。我正在使用此块中的代码作为如何实现此类滑块的指南。这是我的（半工作）Plunker的链接： https ：//plnkr.co/edit/zwCBQ1wR3iBlGYCMYqFe ？ p = preview 我认为这应该很简单，因为我已经设置了动态配置x轴的方法，具体取决于数据，具有以下代码： var startDate = d3.time.month.offset(new Date(), -108); var endDate = new Date (); var dates = createDatesArr(startDate, endDate); … var area = d3.svg.area() .x(function(d) { return xScale(dx); … xScale.domain([ d3.min(dates, function(d) { return d; }), d3.max(dates, function(d) { return d; }) ]); var totals = []; […]

Internet Explorer中的D3 SVG问题: 我在使用D3和SVG显示滚动图例方面遇到了一些麻烦。我的传说因数据而异，可以是任何范围。从1到150 这是一个简单的工作小提琴： https://jsfiddle.net/bikrantsharma/eqnnd84v/ 在Chrome上：一切正常，它滚动得很好但是在IE中，容器显示的高度较小，所有的图例都显示实际的小而且没有滚动因为最大高度永远不会被击中。我已经读过某个地方IE没有正确确定SVG高度所以我们必须使用相对定位并提供初始高度。我尝试过应用相对和绝对定位 .legend-main-div{ height:0; padding:40%; position:relative; } .SVGClass{ top:0; bottom:0; position:absolute; } 其中SVGClass应用于svg元素。这会正确显示图例，但现在我松开了滚动function。有没有办法让滚动图例同时在Chrome和IE中运行？由于某些原因，小提琴中的所有项目都没有显示在我的滚动窗口中，但在我的实际代码中，它工作正常。