CODEWITHSUNDEEP
d3.js
crazier
crazier

Reputation: 23

Triangle scatter plot with D3.js

I was trying to create a scatter plot with triangle points following this example. But I got all the triangles locate at the top left corner, which looks so weired. Can anyone help to fix and explain?

plot picture here

code:
        svg.selectAll(".point")
           .data(data)
           .enter()
           .append("path")
           .attr("class", "point")
           .attr("d", d3.svg.symbol().type("triangle-up"))
           .attr({
            cx: function(d) { return x(d.quality); },
            cy: function(d) { return y(d.Type); },
            r: 8
          })
           .style("fill", function(d){return color(d.Type);});

Upvotes: 0

Views: 2010

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

You can't use cx and cy for anything other than circles. Use 

.attr("transform", function(d) { return "translate(" + x(d.quality) + "," + y(d.Type) + ")"; })

Upvotes: 1

Related Questions