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"); }
}

Answer 2

我的回答几乎与css有关，但我认为解决问题是个好主意。

    d3.selection.prototype.css = function (...arr) {
        if (arr.length === 2) {
            this.style(arr[0], arr[1]);
        } else if (arr.length === 1 && typeof arr[0] === 'object') {
            let properties = arr[0];

            for (let prop in properties) {
                this.style(prop, properties[prop]);
            }
        }
        return this;
    };

用途：

    d3.select('body').css('text-decoration', 'underline').css({
        'color': '#f00',
        'font-size': '20px'
    });

p / s：我刚刚在2小时前学习d3。祝你好运：）

D3.js动态设置多个样式

2 个答案: