[帮助]：d3.js Scatterplot遍历3个不同的数组

Question

Description of what i am doing: I generated a scatterplot. when user clicks on cluster button, old scatter plot erases and the new clustered data shows up. Initial data to draw scatterplot was array of coordinates. After clustering with dimas-kmeans clustering package,(src: https://www.npmjs.com/package/dimas-kmeans ), The clustered data is stored in 3 different arrays.(3 different clusters)

Problem: How i can traverse through this new clustered data (which is 3 different arrays) to plot scatterplot with each cluster representing different color ?

link to jsfiddle: https://jsfiddle.net/data_x/nk2mhhtc/12/

Important code: (At line 126 in jsfiddle)

       .attr("cx", function (d,i) { //d is each array out of 3 arrays
            console.log(d);
            return  x(d[0]);
        })
        .attr("cy", function (d) {               
            return y(d[1]);
        })
        .style("fill", color)//Different color to each different array out of 3. 3 different color patterns to distinguish 3 different clusters.  

Any kind of hints/help is appreciated,

Thank you,

Answer 1

您clustered_data在changeplot是对象数组，而你最初的data是坐标的数组...大概getClusters必须做更多的收拾正确的数据结构。

Answer 2

Donot know why i myself answer all my questions within few days.

Sol: I donot need to change the data format i got from getclusters() rather i need to parse through different clusters and output color in the following way:

//Create circles
    var circles1 = svg.selectAll("circle")
                        //.data(cluster_result);
                        .data(clustered_data)
                        .enter()
                        .append('g')
                       .each ( function(d,i) {
                            d3.select(this).selectAll("circle")
                                .data(d.data)
                                .enter()
                                .append("circle")
                                .attr("cx", function(d) { return x(d[0])})
                                .attr("cy", function(d){ return y(d[1])})
                                .attr("r", 3)
                                .style("fill", color(d.data));
                        })