SVG append causes d.join error on D3 JavaScript

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!

Answers


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.


Need Your Help

Operation is not valid while ItemsSource is in use. Access and modify elements with ItemsControl.ItemsSource

c# wpf listbox

I'm trying to make 2 list boxes where I can press on a button to add an item selected from the left listbox to the right listbox. Here's the XAML for the listboxes:

How to avoid duplicate records adding inside angular for each loop?

javascript angularjs json

The below directive code is forming an JSON dynamically. I have to form a JSON without dupicate object names.