D3js压力表图

D3js gauge graph

本文关键字：压力表 D3js      更新时间：2023-09-26

我开始使用d3js http://d3js.org，一开始我需要的是仪表图标。它显示了拍卖结束的时间和拍卖处于哪个状态。页面上会有更多的图标。这里是小提琴http://jsfiddle.net/TdWtC/

第一次加载是可以的，但我需要更新的帮助。更新时背景和指针都需要更新。主要的问题是，在更新背景重叠指针。可能我做得完全错了，但我自定义了类似的代码片段，无法继续前进。

这是背景与指针重叠的部分

this.body.append("svg:path")
        .style("fill", color)
        .attr("d", d3.svg.arc()
        .startAngle(this.valueToRadians(start))
        .endAngle(this.valueToRadians(end))
        .innerRadius(0.4 * this.config.raduis)
        .outerRadius(this.config.raduis))
        .attr("transform", function() { return "translate(" + self.config.cx + ", " + self.config.cy + ") rotate(270)" });

Thanks for help

问题是你的表带不包含在它们自己的g元素中。任何对update的调用都会在指针的g元素之后附加波段，从而出现在指针的顶部。您可以通过将带放入它们自己的g元素中来轻松解决这个问题，该元素附加在指针的g元素之前。

我在这里做了这些改变，并对你的代码进行了一些细化——你不需要将波段单独传递给d3，它可以同时绘制它们。请注意，我只处理.enter()选择(即新元素)，因为你没有改变update()调用中的任何数据。为了使其适用于更改的数据，您需要为.exit()选择(删除元素，可能只是segments.exit().remove())和更新的选择(可能是您用于设置.enter()选择的开始和结束角度的代码)实现处理程序。

相关文章：