SVG append causes d.join error on D3 JavaScript

Question

I'm trying to draw axes on a graph but when I append svg with g with the following line, I receive an error of 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);

However, when I delete these lines, error disappears. Any ideas on how to solve this? Here is the DEMO.

Thank you!

Answer 1

This line is causing the problem:

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

This is selecting all the path elements of the svg. When you add the axis, they also contain path elements that are being selected but aren't part of the voronoi. The solution is to make this selector more specific:

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

Updated example here.