SVG追加在D3 JavaScript上導致d.join錯誤

Question

我正在嘗試在圖形上繪制軸，但是當我在g的以下行中附加svg時，會收到TypeError: d.join is not a function錯誤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);

但是，當我刪除這些行時，錯誤消失了。 關於如何解決這個問題的任何想法？ 這是演示 。

謝謝！

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

在此更新示例。