Как добавить несколько прямоугольников в D3? - PullRequest
Новая
       26

Как добавить несколько прямоугольников в D3?

0 голосов
/ 15 октября 2018

Мне интересно, можно ли добавить несколько прямоугольников на одну точку данных.В моем примере есть три точки данных.Для каждого я стараюсь создать 2 прямоугольника.В итоге должно быть 6 прямоугольников.3 в красном, 3 в синем. ИЗОБРАЖЕНИЕ

Согласно этому ответу, я попробовал следующее решение: 

var svg = d3.select("body").append("svg");

      svg.selectAll("rect")
      .data([10,60,120])
      .enter()
      .append("g")
      .append("rect")
      .attr("width", 20)
      .attr("height", 20)
      .attr("x", 20)
      .attr("y", function(d) {return d})
      .attr("fill",  "red")

      .selectAll("rect")
      .data(function(d) { return d3.range(d); })
      .enter()
      .append("rect")
      .attr("width", 20)
      .attr("height", 20)
      .attr("x", 60)
      .attr("y", function(d) {return d})
      .attr("fill",  "blue");

К сожалению, синие прямоугольники созданы внутри красных.Есть идеи как этого добиться?Вот ПРИМЕР

1 Ответ

0 голосов
/ 15 октября 2018

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

Если вы хотите добавить прямоугольники, а не вкладывать их в исходный прямоугольник, вам необходимодобавьте оба прямоугольника к вашему g узлу.Когда вы связываете данные и добавляете свои узлы g, присваивайте эти узлы переменной: 

var svg = d3.select("body").append("svg");

var nodes = svg.selectAll(".rect")
  .data([10,60,120])
  .enter()
  .append("g")
  .classed('rect', true)

Затем вы можете добавить два прямоугольника к узлам g: 

// red rectangles
nodes.append("rect")
  .attr("width", 20)
  .attr("height", 20)
  .attr("x", 20)
  .attr("y", function(d) {return d})
  .attr("fill",  "red")

// blue ones
nodes.append("rect")
  .attr("width", 20)
  .attr("height", 20)
  .attr("x", 120)
  .attr("y", function(d) {return d})
  .attr("fill",  "blue")

Обратите внимание, что если вы сделаете это: 

var nodes = svg.selectAll("rect")
  .data([10,60,120])
  .enter()
  .append("g")
  .append("rect")
  .attr("width", 20)
  .attr("height", 20)
  .attr("x", 20)
  .attr("y", function(d) {return d})
  .attr("fill",  "red")

nodes будет ссылкой на элементы rect, так как они были добавлены последними, и будет добавлено все, что добавлено к nodes внутри элементов rect.

Также обратите внимание, что вам нужно только один раз связать данные с элементами g;он автоматически наследуется всеми дочерними узлами этих g элементов.

Вот завершенный пример: 

var svg = d3.select("body").append("svg");

var g = svg.selectAll(".rect")
  .data([10,60,120])
  .enter()
  .append("g")
  .classed('rect', true)

g.append("rect")
  .attr("width", 20)
  .attr("height", 20)
  .attr("x", 20)
  .attr("y", function(d) {return d})
  .attr("fill",  "red")

g.append("rect")
  .attr("width", 20)
  .attr("height", 20)
  .attr("x", 120)
  .attr("y", function(d) {return d})
  .attr("fill",  "blue")
<script src="https://d3js.org/d3.v5.js"></script>
...