如何使用 D3 js(v3) 中的循环在 SVG 元素中创建可变数量的图像或圆形元素

Question

我正在尝试使用 d3 制作象形图。所以，我有一个范围从 1 到 10 的缩放值，我想创建图像或圆圈来表示数字，即数字 7 的 7 个圆圈或图像，数字 5 的 5 等。图像或圆圈标签应该在“mousein”事件上绘制。 'mouseout' 事件不应删除图像。但是每个 mousein 事件都应该重新绘制正确数量的圆圈。有人可以用正确的方法演示一个简单的例子吗？

我尝试过的事情： 我可以将 n 个图像标签附加到 svg 元素，但我只能删除最后一个元素，因为变量获取了绘制的最后一个圆圈的值。

for(i=1;i<limit;i++){         // 1<=limit<=10 --> Scaled value on each mousein event
    var img = svg.append("image")
      .attr("x", i*width*1/8)
      .attr("y", height*1/10)
      .style("opacity", 1)
      .attr("width", 50)
      .attr("height", 50)
      .attr("xlink:href", "image.png")
      .attr("class", "image");    
    }

当我将所有元素放在一个组中时，图像没有显示，但元素存在于 DOM 中，并且还显示了图像的正确路径。

Answer 1

D3.js 的全部强大之处在于它能够将数据绑定到显示元素，因此您不必编写循环来手动将项目添加到 DOM。

此示例演示如何使用 selectAll()、data()、enter() 和 remove() 函数向 SVG 元素添加圆圈，这些函数在 Mike Bostock 的文章 Thinking in Joins 中有所描述。

const width = 500;
const height = 500;

let svg = d3.select('svg')


// create the rectangles to hover over
let rectangleHolders = svg.select('.rectangle-holder')
  .selectAll('rect')
  .data([1, 2, 3, 4, 5])
  .enter()
  // to add a rectangle with text, we need to add a group to hold both elements
  .append('g')
  // translate group to correct position
  .attr('transform', (d, i) => `translate(${i*40})`)

// add rectangle to each group
rectangleHolders.append('rect')
  .attr('height', 18)
  .attr('width', 18)
  // add event handler to rectangle to draw circles
  .on('mouseover', draw)

// add text to each group
rectangleHolders.append('text')
  .attr('dy','15')
  .attr('dx','10')
  .attr('text-anchor','middle')
  .text(d => d)

// function to draw circles
function draw(number) {

  console.log('draw', number)

  // create some dummy data in this case an
  // array of length 'count' full of nulls
  const data = Array(number)

  // select circle elements and bind data
  let circles = svg.select('.circle-holder').selectAll('circle')
    .data(data)

  // enter, append and set attributes
  circles.enter()
    .append('circle')
    .attr('cx', (d, i) => i * 20 + 10)
    .attr('cy', 10)
    .attr('r', 8)
    .attr('value', d => d)
    // add a tranisition to the opacity so the circles fade in
    .attr('opacity', 0)
    .transition()
    .attr('opacity', 1)

  // exit and remove unused elements (with transition)
  circles.exit()
    .transition()
    .attr('opacity', 0)
    .remove()
}

rect {
  fill: none;
  stroke: black;
}

body {
font-family:sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg height="40" width="200">
<g class="rectangle-holder"></g>
<g class="circle-holder" transform="translate(0,20)"></g>
</svg>