Question

数据

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

我为每个派对创建了一个svg小组＆＃39;填充了许多圈子来代表每个MP＆＃39;属于该党。

我遇到的问题是，有些派对太大了，以至于它们都在屏幕上运行。理想情况下，我想在返回到下一行之前将宽度设置为大约10个圆圈。

我找到了设置SVG文本宽度而不是SVG形状的示例。是否可以使用D3创建多行SVG形状？

Plunker

{{1}}

Answer 1

也许这样的事情？您可能需要调整值以适应。

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

在D3中的多行上加载SVG形状

1 个答案: