d3 версия 4 проблема с прямоугольником и текстом

d3.js

1015 просмотра

1 ответ

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

Этот метод работает в v3, чтобы добавить прямоугольники с текстом внутри, но терпит неудачу в v4. Я получаю сообщение об ошибке «read property 'querySelectorAll'», но оно может не относиться к этому коду. Мы ценим любые предложения.

group = vis.selectAll(".rectangle")
         .data(data); 


gEnter = group.enter()
    .append("g")
    .attr("class", "rectangle")
    .attr("fill", function (d) { return d.colour; });


gEnter.append("rect") 
  .attr("class", "rectband");


group.selectAll(".rectband")
     .attr("width", 18)
     .attr("height", 18)
     .style("opacity", .5) 
     .style("stroke", "black")
     .style("cursor", "move");


svgEnter = group.enter()
      .append("svg")
      .attr("height", 18)
      .attr("class", "interval")
      .attr("width", 10)
      .attr("x", 20)
      .attr("y", 20);

svgEnter.append("text")
                .attr("class", "intervalLabel")
                .attr("x", 6)
                .attr("y", 14)
                .style("pointer-events", "none")
                .text(function (d) { return (d.name); });
Автор: user3359706 Источник Размещён: 18.07.2016 12:48

Ответы (1)


1 плюс

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

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

Во всяком случае, если вы сделаете свой SVG шире, текст показывает просто отлично:

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>

</head>

<body>
  <script>
  
    var vis = d3.select('body')
      .append('svg')
      .attr('width', 400)
      .attr('height', 400);
  
    group = vis.selectAll(".rectangle")
      .data([
        {
          colour: 'red',
          name: 'one'
        },
        {
          colour: 'green',
          name: 'two'
        }
      ]);


    gEnter = group.enter()
      .append("g")
      .attr("class", "rectangle")
      .attr("fill", function(d) {
        return d.colour;
      });

    gEnter.append("rect")
      .attr("class", "rectband")
      .merge(gEnter)
      .attr("width", 18)
      .attr("height", 18)
      .style("opacity", .5)
      .style("stroke", "black")
      .style("cursor", "move");

    svgEnter = group.enter()
      .append("svg")
      .attr("height", 18)
      .attr("class", "interval")
      .attr("width", 30)
      .attr("x", 20)
      .attr("y", 20);

    svgEnter.append("text")
      .attr("class", "intervalLabel")
      .attr("x", 6)
      .attr("y", 14)
      .style("pointer-events", "none")
      .text(function(d) {
        return (d.name);
      });
  </script>
</body>

</html>

Автор: Mark Размещён: 18.07.2016 02:30
Вопросы из категории :
32x32