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

你可以看到在这个小提琴中工作的代码，我使用一个对象来设置styles：https://jsfiddle.net/gerardofurtado/o54rtrqc/1/

对于属性，请使用attrs代替attr。

这是API。

Answer 2

我也正在学习Lynda.com课程。以下是使用D3版本4的“将数据绑定到DOM”练习的示例： JSFiddle

HTML：

    <!--
Added these two scripts:
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
-->

<div class="container">
  <h2>D3 Graphic</h2>
  <section id="chart">
    <div class="item">Darth Vader</div>
    <div class="item">Luke Skywalker</div>
    <div class="item">Han Solo</div>
    <div class="item">Obi-Wan Kenobi</div>
    <div class="item">Chewbacca</div>
    <div class="item">Boba Fett</div>
  </section>
</div>

JS：

var myStyles = [{
          width: 200,
          color: '#A57706'
        }, {
          width: 300,
          color: '#BD3613'
        }, {
          width: 150,
          color: '#D11C24'
        }, {
          width: 350,
          color: '#C61C6F'
        }, {
          width: 400,
          color: '#595AB7'
        }, {
          width: 250,
          color: '#2176C7'
}];

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

D3：在style方法中传递对象不起作用

2 个答案: