D3: передача объекта в методе стиля не работает

d3.js

1134 просмотра

2 ответа

189 Репутация автора

Я использую 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}});

Пожалуйста, объясните, что здесь не так.

Автор: user3065757 Источник Размещён: 19.07.2016 08:55

Ответы (2)


5 плюса

76623 Репутация автора

Вы можете применять объекты в стилях и атрибутах с помощью 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 .

Автор: Gerardo Furtado Размещён: 19.07.2016 09:30

-1 плюса

141 Репутация автора

Я также работаю через курс Lynda.com. Вот пример упражнения «Привязка данных к DOM» с использованием D3 версии 4: 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';
        }
 })
Автор: NinoLopezWeb Размещён: 18.10.2016 08:39
Вопросы из категории :
32x32