CODEWITHSUNDEEP
d3.js
user3359706
user3359706

Reputation: 511

d3 version 4 issue with rectangle and text

This method works in v3 to append rectangles with text inside but fails in v4. I getting an error message "read property 'querySelectorAll'" but it may not be relevant to this piece of code. Any suggestions would be appreciated. 

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); });

Upvotes: 0

Views: 1073

Answers (1)

Mark
Mark

Reputation: 108512

Your code kinda works but your text elements are on top of each other and in an svg container that's not wide enough to show their content.

Anyway, if you make your svg wider, the text shows just fine:

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" 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>

Upvotes: 1

Related Questions