d3 缩放基本形状

Question

我正在尝试根据数据动态缩放一些形状。 这是我到目前为止所拥有的：

svg.selectAll(".point")
  .data(data)
  .enter()
  .append("path")
  .attr("class", "point")
  .attr("d", d3.svg.symbol().type("triangle-up"))
  .attr("transform", function(d) { return "translate(" + x(d.x) + "," + 
    y(d.y) + ")"; });

我可以添加另一个属性吗？ 我尝试使用以下但不起作用：

.attr("transform", "scale(xMap)");

xMap 是缩放到某个范围的数据中的值。

Answer 1

您可以在同一个匿名函数中进行translate和scale 。 除此之外，您必须将字符串与数字连接起来。 你这样做的方式...

"scale(xMap)"

...您将字面上的“xMap”传递给scale() 。

因此，它应该是：

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