D3数学函数创建

D3 Mathematical Function Create

本文关键字：创建 函数 D3      更新时间：2023-09-26

我想为我的D3页面创建一个数学函数。

  • 每个节点都有一个"；得分；我可以通过d.score获得

我喜欢创建一个函数，根据分数绘制圆的半径。

我考虑了以下内容：

r<=10，r>=3

10-（d.score/50）=r

我如何在D3中做到这一点？

.attr('r', function(d) {
    return node_size( * * ? ? ? * * );
});

谨致问候，Marc

请注意，这可能是一个糟糕的问题，因为它的字符是"请给我这个问题的代码"。

不管怎样，我想这就是你想尝试的，我想：

.attr('r', function(d) {
    var r = 10 - (d.score / 50);
    if (r > 10) {r = 10;}
    else if (r < 3) {r = 3;}
    return r;
});

首先，您需要定义一个线性比例，将node_size的值映射到实际半径，如下所示（示例）：

r = d3.scale.linear().range([3,10]);

然后将score参数的值指定为域，如下所示（假设DATA是您的数据结构）

// first define your radius according to your formula specified in your question.
DATA.forEach(function(d){
   d.radius=10 - (d.score / 50);
})
//Then, assign is as a domain of your radius function
r.domain(d3.extent(DATA.map(function(d){return d.radius;})))

最后，当绘制数据时，你应该这样做：

.attr('r', function(d) {return r(d.radius)});

您可以合并或优化这些步骤，但我认为这是一个良好的开端。

希望这能有所帮助。

相关文章：