如何设置 d3 符号的大小？

Posted 2023-02-22

【中文标题】如何设置 d3 符号的大小？

【英文标题】：How to set the size of a d3 symbol?

【发布时间】：2017-07-31 22:44:24

【问题描述】：

我不知道如何在此设置我的 d3 符号的大小：

        legendRectE
            .append('path')
            .attr("d", d3.svg.symbol().type((d) =>  return d[2] ))
            .style("fill", function (d) 
                return d[1];
            )
            .attr('stroke', 'black');

我尝试像这样使用.size()，但没有成功：

        legendRectE
            .append('path')
            .attr("d", d3.svg.symbol().type((d) =>  return d[2] ))
            .style("fill", function (d) 
                return d[1];
            )
            .attr('stroke', 'black')
            .size(20*20);

当我尝试像这样使用.size() 时，我收到一个错误：[ts] Supplied parameters do not match any signature of call target.

那么在这种情况下如何设置符号的大小？

【参考方案1】：

您必须在符号生成器中定义size（d3.svg.symbol 函数）：

d3.svg.symbol().size(size).type(foo);
//size here-----------^

这是一个演示：

var svg = d3.select("svg");

var sizes = ["10", "50", "100", "200", "500", "1000", "2000"];

sizes.forEach((d, i) => 
  svg.append('path')
    .attr("transform", "translate(" + (10 + (i+1) * (i+1) * 5) + ",100)")
    .attr("d", d3.svg.symbol().size(d).type("diamond"))
    .style("fill", "gold")
    .attr('stroke', 'black');
);

<script src="https://d3js.org/d3.v3.js"></script>
<svg></svg>

【讨论】：

谢谢@Gerardo！因此，针对我的代码示例，我将 .attr("d", d3.svg.symbol().type((d) => return d[2] )) 更改为 .attr("d", d3.svg.symbol().type((d) => return d[2] ).size(20*20)) 以使其正常工作。

符号大小的比例或度量单位是什么？如何动态修改它，例如响应过渡序列中的鼠标悬停？谢谢

@Dinesh 单位是像素（实际上是正方形像素）。关于修改它的问题，请将其作为新问题发布，因为在 cmets 部分很难回答。