样式方法不采用对象

Question

我正在尝试更改所有div元素的CSS属性，其中class=item（通过使用D3 selectAll（）访问div元素）。我只能使用 style（） 更改单个属性，但是当我尝试将对象传递给 style（） 时没有任何反应。例如，这工作正常：

var myData = [{width: 100, background: '#FF0000'}, {width: 140, background: '#B22222'}]
d3.selectAll('.item').data(myData).style('background',function(d){ return d.background})

但是，这不会：

d3.selectAll('.item').style({'background': function(d){ return d.background }, 'width': function(d){return d.width } })

我在某处读到，在传递对象时必须使用 styles（） 而不是 style（），但即使是 styles（） 也不起作用。这是包含代码的代码笔链接：http://codepen.io/anon/pen/JEoXOV

有人可以告诉我我在这里错过了什么吗？

Answer 1

Mike Bostock在v4中移动了东西。

https://github.com/d3/d3-selection/blob/master/README.md#selection_style

为了简洁起见，多值方法——你传递一个 对象以设置多个属性、样式或属性 同时 — 已提取到 D3-选择-多且 否 默认捆绑包的较长部分。多值映射方法具有 也重命名为复数形式以减少过载：selection.attrs， 选择.样式和选择.属性。

Answer 2

根据 d3.js文档 https://github.com/d3/d3-selection#selection_style selection.style(name,value)接受单个名称-值对（值可以是常量或像往常一样接受 d，i，数据的函数），但不接受对象

如果要设置多个样式属性，则需要使用多个 style（） 函数

d3.selectAll('.item')
    .style('background', function(d){ return d.background; })
    .style('width', function(d){return d.width; });

编辑：或者使用d3-selection-multi库，正如Eric Guan在他的答案中指出的那样：https://stackoverflow.com/a/41474957/79536