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

Question

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

我尝试过的事情:我可以将 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 的全部功能在于它能够将数据绑定(bind)到显示元素，因此您无需编写循环来手动将项目添加到 DOM。

此示例演示使用 selectAll()、data()、enter() 和 将圆圈添加到 SVG 元素Mike Bostock 的文章 Thinking in Joins 中描述了 .remove() 函数.

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>