三角形散点图与D3.js [英] Triangle scatter plot with D3.js

问题描述

我试图根据此

 代码：
 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）;}）; 
  

解决方案

不能使用 cx 和 cy 。使用

  .attr（transform，function（d）{returntranslate（+ x（d.quality）+ ，+ y（d.Type）+）;}）
  

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?

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);});

解决方案

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) + ")"; })

这篇关于三角形散点图与D3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！