javascript - D3.js 动态设置多种样式

Question

D3 的选择操作是通用的(如attr)，它接受一个值，或者一个传递数据的函数。我想根据当前选择设置一些样式参数。

来自doc : 据我了解，以下方案可行

sel.style("stroke", "#000")
sel.style({"stroke": "#000", "stroke-width": "0.5"})
sel.style("stroke", function(d){return "#000"})

但是，我需要的是获取 fn 返回的对象。

var fn = function(d){
return {"stroke": "#000", "stroke-width": "0.5"}
}
sel.style( fn)

上面的例子，我没有对 d 做任何事情，但是，在我的例子中，我会根据传递的 d 做出决定。

我确定，我可以做类似的事情，

sel.style(`fill`, fillFn)
sel.style(`stroke`, strokeFn)

但是，我正在努力使我的代码通用，所以我可能不知道我需要提前设置什么样式。

编辑:

我也试过了，selection.property，

sel.property("style", fn);

但是出错了

TypeError: Object [object Array] has no method 'property'

但是，在同一个选择上，如果我这样做了

sel.style({"stroke": "#000", "stroke-width": "0.5"})

它工作正常。有什么问题吗？

Answer 1

在这种情况下，我会使用 .each() function (或者可能是 .call() )在每个(或一次)选定的元素上运行一个函数。在这个函数中，你可以根据数据或其他东西，添加样式、属性等。

基本代码如下所示。

sel.each(someFunc);
function someFunc(d) {
    if(d.something) { d3.select(this).style("foo", "bar"); }
    if(d.somethingElse) { d3.select(this).attr("bar", "foo"); }
}