CODEWITHSUNDEEP
d3.jssvg
user3821345
user3821345

Reputation: 648

Load SVG shapes over multiple lines in D3

Data

MP,Party,Constituency,Status
"Abbott, Diane",Labour,Hackney North and Stoke Newington,Remain
"Abrahams, Debbie",Labour,Oldham East and Saddleworth,Remain
"Adams, Nigel",Conservative,Selby and Ainsty,Leave

I have created a svg group for each 'Party' populated with many circles to represent each 'MP' belonging to that Party.

The problem I have is that some of the parties are so large that they run right off the screen. Ideally I would like to set the width at about 10 circles before they return to the next 'line'.

I have found examples for setting the width of SVG text but not SVG shapes. Is it possible to create multiple lines of SVG shapes using D3?

Plunker

   var svg = d3.select('body')
      .append('svg')
      .attr('width', width)
      .attr('height', height)

    var chart = svg
      .append('g')
      .attr('transform', 'translate(50,100)')

    var party = chart.selectAll(".party")
      .data(mps)
      .enter()
      .append('g')
      .attr('transform', function(d, i) {
        return "translate(0," + (i * (height / mps.length) + ")")
      })

    party
      .append('text')
      .text(function(d) {
        return d.key
      })

    party.selectAll('.members')
      .data(function(d) {
        return d.values
      })
      .enter()
      .append('circle')
      .attr('class', 'chart')
      .attr('r', 5)
      .attr('cy', '10')
      .style('fill', function(d) {
        return '#' + d.Color
      })
      .attr("transform", function(d, i) {
        return "translate(" + i * 13 + ",20)"
      });

Upvotes: 0

Views: 57

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

Something like this perhaps? You'll likely have to adjust the values to suit.

  .attr('transform', function(d, i) {
    return "translate(" + ((i / 10) * 20)) + "," + ((i % 10) * (height / mps.length)) + ")")

Upvotes: 2

Related Questions