javascript - 唯一 id ，D3 中生成的矩形的 id 名称

Question

以下代码使用 D3 生成 11 个正方形:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.js"></script>

<script type="text/javascript">

  var width = 1000,
    height = 250,
    margin = 4,
    nRect = 11,
    rectWidth = (width - (nRect - 1) * margin) / nRect,

    svg = d3.select('#chart').append('svg')
      .attr('width', width)
      .attr('height', height);

  var data = d3.range(nRect),
    posScale = d3.scaleLinear()
      .domain(d3.extent(data))
      .range([0, width - rectWidth]);

  svg.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', posScale)
    .attr('width', rectWidth)
    .attr('height', height);


</script>

我的计划是稍后使用这些方 block 作为链接，我是否可以在生成的每个方 block 上放置唯一的 ID 或名称？

Answer 1

最简单的解决方案是使用矩形的索引:

.attr("id", function(d,i){ return "rect" + i})

请记住，ID 不能以数字开头。这就是为什么我将字符串 rect 与每个矩形的索引连接起来。

这是一个演示:

var width = 1000,
  height = 250,
  margin = 4,
  nRect = 11,
  rectWidth = (width - (nRect - 1) * margin) / nRect,

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

var data = d3.range(nRect),
  posScale = d3.scaleLinear()
  .domain(d3.extent(data))
  .range([0, width - rectWidth]);

svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr("id", function(d,i){ return "rect" + i})
  .attr('x', posScale)
  .attr('width', rectWidth)
  .attr('height', height);

<script src="https://d3js.org/d3.v4.min.js"></script>