D3.js 动态设置多种样式

Question

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

来自文档：据我所知，以下场景将起作用

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()函数（或可能.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"); }
}