旋转D3符号

Question

我渲染D3符号，看起来像这样：

svg.append('path') 
    .attr("d", d3.svg.symbol().type("triangle-up").size(10)) 
    .attr("transform", function(d) { return "translate(" + 100 + "," + 100 + ")"; }) 
    .style("fill", "red") 

我想，这样的三角点离开<|旋转这个三角形。我怎样才能旋转这个符号，同时保持它在我的位置相同的位置？我一直在努力做到以下几点，但符号移动到我的即左上角（它不会停留在通过转换创建的位置）：

svg.append('path') 
    .attr("d", d3.svg.symbol().type("triangle-up").size(10)) 
    .attr("transform", function(d) { return "translate(" + 100 + "," + 100 + ")"; }) 
    .attr("transform", "rotate(-45)") 
    .style("fill", "red") 

Answer 1

的问题是，第二打电话约定transform覆盖这里的第一个值：

.attr("transform", function(d) { return "translate(" + 100 + "," + 100 + ")"; }) 
.attr("transform", "rotate(-45)") // Only this value will remain as the value of the attr 

要解决它，你应该旋转追加到的transform原值：

.attr("transform", function(d) { return "translate(" + 100 + "," + 100 + ") rotate(-45)"; }) 

另一个SOLU将symbol放入嵌套的g元素中，并将各个变换应用于它们中的每一个，即example。