D3 数学函数创建

Question

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

每个节点都有一个“分数”，我可以通过 d.score

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

我考虑了以下问题：

r <= 10, r >= 3

10 - (d.score / 50) = r

我如何在 D3 中执行此操作？

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

亲切的问候，马克

Answer 1

请注意，这可能是个糟糕的问题，因为它是 "please give me code for this problem" 个字符。

无论如何，我想这就是你想尝试的：

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

Answer 2

首先，您需要定义一个线性比例尺，将 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)});

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

希望这对您有所帮助。

D3 数学函数创建

D3 Mathematical Function Create

javascript

d3.js