D3js 仪表图

Question

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

第一次加载没问题，但我需要更新方面的帮助。更新时都必须更新背景和指针。主要问题是更新背景重叠指针。 可能我做错了，但我定制了类似的 sn-p 并且无法继续。

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

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)" });

感谢您的帮助

Answer 1

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

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