javascript - SVG 附加导致 D3 JavaScript 上的 d.join 错误

Question

我试图在图表上绘制坐标轴，但是当我在 svg 后添加以下行时，我收到错误消息 TypeError: d.join is not a function:

svg.append("g")
        .attr("transform", "translate(0," + height / 2 + ")")
        .call(xAxis);

svg.append("g")
        .attr("transform", "translate(" + width / 2 + ",0)")
        .call(yAxis);

但是，当我删除这些行时，错误消失了。关于如何解决这个问题的任何想法？这是 DEMO .

谢谢!

Answer 1

这一行导致了问题:

var path = svg.selectAll("path");

这是选择 svg 的所有 path 元素。当您添加轴时，它们还包含被选中但不是 voronoi 一部分的路径元素。解决方案是让这个选择器更具体:

var path = svg.selectAll(".step"); //<-- select by class "step" 

function redraw() {
    var d = [];
    for (var i = 0; i < k; i++) {
        d.push([X(x_means[i]), Y(y_means[i])]);
    }
    var vd = voronoi(d);
    var v = path
            .data(vd, polygon);

    v.exit().remove();

    v.enter()
            .append("path")
            .attr('class','step'); //<-- when you add a voroni path give it that class

更新示例 here .