Как добавить определенные цвета к данным в JSON с помощью d3.js - PullRequest
Новая
       13

Как добавить определенные цвета к данным в JSON с помощью d3.js

0 голосов
/ 04 мая 2018

Я пытаюсь добавить эффект в проект для иерархической граничной диаграммы на d3.js

Это основано на той же иерархической диаграмме, что и в mbostock (https://bl.ocks.org/mbostock/7607999).

Я хочу назначить определенные цвета при наведении курсора мыши на ссылку из моего JavaScript на файл JSON. В тот момент, когда вы его запускаете, он автоматически присваивается в таблице стилей

Например:

1010 * JSON * 

[
{"name":"brand1","type:1","size":3938,"imports":["activity1"]}, colour assigned #8000ff
{"name":"brand2","type:2","size":3938,"imports":["activity2"]}, colour assigned #80bfff
{"name":"brand3","type:3","size":3938,"imports":["activity3"]}  colour assigned #66ffb3
]

В JavaScript 

var link = svg.append("g").selectAll(".link"),
    node = svg.append("g").selectAll(".node");

link = link
    .data(packageImports(root.leaves()))
    .enter().append("path")
      .each(function(d) { d.source = d[0], d.target = d[d.length - 1]; })
      .attr("class", "link")
      .attr("d", line);


function mouseovered(d) {
  node
      .each(function(n) { n.target = n.source = false; });

  link
      .classed("link--target", function(l) { if (l.target === d) return l.source.source = true; })
      .classed("link--source", function(l) { if (l.source === d) return l.target.target = true; })
    .filter(function(l) { return l.target === d || l.source === d; })
      .raise();

  node
      .classed("node--target", function(n) { return n.target; })
      .classed("node--source", function(n) { return n.source; });
}

Я думал добавить следующую декларацию 

var fill = d3.scale.ordinal()
    .domain(d3.range(20))
    .range(["#eabe1d","#f7a51d","#e9962c","#ee7727","#f05620","#e82d24","#e91d26","#c62038","#ae1858","#1cbec9","#12aab5","#148ca5","#0a7887","#0a638b","#ec1559","#e61b4a","#b31c45","#a01b36","#651a5b"]);

Но оттуда я не знаю, как вызвать его для поиска в JSON атрибута type1, type, type2.

Несмотря на приведенный выше пример JSON, код был взят из mbostock.

1 Ответ

0 голосов
/ 20 мая 2018

После осмотра кажется, что он получает тип в JSON и вызывает его в функции. 

[
{"name":"brand1","stroke": "#8000ff","size":3938,"imports":["activity1"]}, colour assigned #8000ff
{"name":"brand2","stroke": "#8680ff","size":3938,"imports":["activity2"]}, colour assigned #80bfff
{"name":"brand3","stroke": "#66ffb3","size":3938,"imports":["activity3"]}  colour assigned #66ffb3
]

затем вызвать его в переменной связи 

link = link
    .data(packageImports(root.leaves()))
    .enter().append("path")
     .each(function(d) { d.source = d[0], d.target = d[d.length - 1]; })
      .attr("class", "link")
      .attr("d", line);
      .style("stroke", function(d) { return d.data.stroke; });

Хотя это не работает, ссылки создаются и строятся из данных для построения ссылки, но последняя строка уничтожает все узлы.

Есть мысли, как этого избежать?

...