d3.js - D3 : passing object in style method is not working

Question

我使用 D3 进行练习。但是，我在将对象传递给 .style() 方法时遇到问题:

var myStyles = [
  '#268BD2',
  '#BD3613',
  '#D11C24',
  '#C61C6F',
  '#595AB7',
  '#2176C7'
];

下面这段代码正在运行

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

但是以下两个代码片段都不起作用

d3.selectAll('.item')
  .data(myStyles)
  .style({'background':function(d){return d}});

d3.selectAll('.item')
  .data(myStyles)
  .style({'color':'white','background':function(d){return d}});

请解释一下这里出了什么问题。

Answer 1

您可以使用d3-selection-multi应用样式和属性中的对象。

首先，您必须引用迷你库:

<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>

然后，您必须使用styles，而不是style:

.styles({'color':'white','background':function(d){return d}});

您可以看到在此 fiddle 中运行的代码，其中我使用一个对象来设置样式:https://jsfiddle.net/gerardofurtado/o54rtrqc/1/

对于属性，请使用 attrs 而不是 attr。

这是API .