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>

我的计划是稍后将这些方块用作链接，无论如何我可以在每个方格上放置一个唯一的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>

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

1 个答案: