javascript - D3.js setting multiple styles dynamically - Stack Overflow

admin管理员组

文章数量:1331388

D3's operation on selection are versatile (likeattr) that it takes a value, or a function with the data passed on. I wanted to set few style parameters based on the current selection.

From the doc: From what I understand, below scenarios will work

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

but, what I need is it to take an object returned by a fn.

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

Above example, I don't do anything with d, but ,in my case, I would make decision based on d passed.

I am sure, I may be able to do something like,

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

But, I am trying to make my code generic, so I may not know what style I need to set ahead of time.

Edit:

I also tried, selection.property,

sel.property("style", fn);

but got error

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

but, on the same selection, if I do

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

it works fine. What could be wrong?

D3's operation on selection are versatile (likeattr) that it takes a value, or a function with the data passed on. I wanted to set few style parameters based on the current selection.

From the doc: From what I understand, below scenarios will work

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

but, what I need is it to take an object returned by a fn.

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

Above example, I don't do anything with d, but ,in my case, I would make decision based on d passed.

I am sure, I may be able to do something like,

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

But, I am trying to make my code generic, so I may not know what style I need to set ahead of time.

Edit:

I also tried, selection.property,

sel.property("style", fn);

but got error

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

but, on the same selection, if I do

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

it works fine. What could be wrong?

• javascript
• d3.js

Share Improve this question Follow edited Oct 16, 2013 at 18:28 bsr asked Oct 16, 2013 at 18:21 bsrbsr 58.7k8888 gold badges217217 silver badges321321 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

In this case, I would use the .each() function (or maybe .call()) to run a function on each (or all at once) selected elements. In this function, you can, based on data or something else, add styles, attributes etc.

The basic code would look like this.

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

My answer relates to css almost but I think it's a good idea to solve the problem.

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

Useage:

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

p/s: I'm just learning d3 about 2 hours ago. Good luck :)

本文标签： javascriptD3js setting multiple styles dynamicallyStack Overflow