Question

我正在尝试更改class = item的所有div元素的CSS属性（通过使用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（）也不起作用。这是包含代码的codepen链接： http://codepen.io/anon/pen/JEoXOV

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

Answer 1

根据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

Answer 2

迈克博斯托克在第4节中移动了一些东西。

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

为了简约，多值方法 - 你传递的地方用于设置多个属性，样式或属性的对象同时 - 被提取到d3-selection-multi并且没有默认包的较长部分。多值映射方法有也被重命名为复数形式以减少过载：selection.attrs， selection.styles和selection.properties。

style方法不带对象

2 个答案: