D3js测量图

Question

我开始使用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)" });

感谢您的帮助

Answer 1

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

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