Связывание данных JSON с данными элементами в d3

Question

Связывание данных JSON с данными элементами в d3

1

Поэтому я встал на проблему в d3. У меня есть этот файл JSON

{
  "nodes": [
    {"container": "Container 1", "x" : 0, "y" : 0, "px" : 0, "py": 0, "col" : 1, "row" : 0, "height" : 100, "width" : 100},
    {"container": "Container 2", "x" : 100, "y" : 0, "px" : 0, "py": 0, "col" : 1, "row" : 0, "height" : 100, "width" : 100}]
}

Я делаю элементы соответствуют длине узлов внутри JSON. Внутри каждого элемента должен быть элемент, который соответствует данным, изображенным выше для контейнера 1, и так далее на другом элементе, который соответствует контейнеру 2.

Мой желаемый файловый фрейм:

<svg>
    <g>
       <rect>Container 1</rect>
    </g>
    <g>
       <rect>Container 2></rect>
    </g>
</svg>

Там, где я потерялся, это

gCode.append("rect").data(graph.nodes)
            .enter()
            .attr('class', 'blob')
            .style("border", "20px solid")

Поскольку я не буду знать размер файла JSON, и мне интересно, как будет произведено создание g-элементов, чтобы первый элемент соответствовал контейнеру 1, а затем и так далее.

Вещи, которые я пробовал

Я выполнял функцию forEach, но мне было рекомендовано не делать этого, потому что это создает проблемы позже, и я подозреваю, что здесь может быть один и тот же случай.

Suliman Sharif 01 авг. 2017, в 20:53

Источник

Теги:

javascript

d3.js

json

svg

1 ответ

Ещё вопросы

Andrew Reid · Accepted Answer · 2017-08-01T17-18-00.000Z

Здесь есть несколько вещей, и я могу не понимать вопрос (я посмотрел на ваш предыдущий вопрос, чтобы лучше понять контекст).

Во-первых, "мне интересно, как создается g-элементов, чтобы первый элемент соответствовал контейнеру 1"

При вводе данных с d3 элементы добавляются в указанном порядке - поэтому первый созданный элемент имеет данные первого элемента массива данных, привязанного к нему. Если ваши данные уже в порядке, то они будут добавляться по порядку.

Если ваши элементы <g> уже существуют в выборе, который вы добавляете <rect> to, то первый элемент в наборе данных будет привязан к <rect> в первом <g> в выборе.

Во-вторых (если я правильно прочитал вашу проблему), если вы пытаетесь создать <rect> в каждом <g> используя одни и те же данные, то почему бы не добавить <g> для каждого элемента в наборе данных, а затем, используя данные связанный с каждым <g>, добавьте <rect> к каждому <g>. Это даст вам структуру, как вы хотите:

<svg>
  <g>
     <rect class="Container1" x="0" y="0" width="100" height="100"></rect>
  </g>
  <g>
      <rect class="Container2" x="100" y="100" width="100" height="100"></rect>
  </g>
</svg>

И можно сделать довольно легко:

var data = {
"nodes": [
  {"container": "Container1", "x" : 0, "y" : 0, "px" : 0, "py": 0, "col" : 1, "row" : 0, "height" : 100, "width" : 100},
  {"container": "Container2", "x" : 100, "y" : 100, "px" : 0, "py": 0, "col" : 1, "row" : 0, "height" : 100, "width" : 100}]
}

var svg = d3.select("body")
  .append("svg")
  .attr("width",400)
  .attr("height",300);
  
// Append one <g> for each item in the data array:  
var g = svg.selectAll("g")
  .data(data.nodes)
  .enter()
  .append("g");
  
// Append a rectangle to each <g> based on the data bound to that <g>:  
g.append("rect")
  .attr("x", function(d) { return d.x; })
  .attr("y", function(d) { return d.y; })
  .attr("width",function(d) { return d.width; })
  .attr("height",function(d) { return d.height; })
  .attr("class", function(d) { return d.container; });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

Этот подход связывает (связывает) данные в json с g, который легко используется для создания новых дочерних элементов в каждом g, который основан на вашем заголовке и вашей цели, похоже на то, к чему вы стремитесь.

Ах, это имеет немного больше смысла, чувствую, что способ, которым я возглавлял, собирался сделать это намного более запутанным.
@SulimanSharif Это не очень хорошая вещь, чтобы сказать ( "способ, которым я возглавлял, собирался сделать это намного более запутанным" ). В моем решении вашего предыдущего вопроса я просто показал, как сделать то, что вы пытались сделать, с помощью выбора входа. Это не моя вина, если у тебя была проблема с XY .
@GerardoFurtado? Я думаю, вы не поняли это. Это значит, что я воспользовался вашим советом по поводу того, чтобы не использовать функцию forEach, что, как мне кажется, послужило тем, что я снова решил по этому вопросу. Не против вашего ответа, который вы заявили ранее.
Хорошо, я думал, что вы имели в виду предыдущий ответ. В любом случае, как предыдущий, так и этот ответ покажут вам, как правильно выбрать «ввод», придерживайтесь этого идиоматического подхода.