Question

我想特别重复一组形状文字矩形文字圈圆圈中的位置再次是圆圈的重复

我的数据是

Jsondata =[
{ "name":"A", "WidthOfRect":50, "justAnotherText":"250", "numberOfCircles" :3 }, 
{ "name":"B", "WidthOfRect":150, "justAnotherText":"350","numberOfCircles" :2 },
{ "name":"C", "WidthOfRect":250, "justAnotherText":"450","numberOfCircles" :1 }]

基本上我从这个数据中试图构建一个自定义条形图。

rect的宽度基于json的数据widthofrect，以及圆的数量基于numberofcircles属性。

我寻找了许多选项来重复一组形状但却找不到一个。

Answer 1

首先，您在your comment中正确：不使用循环在D3代码中追加元素。此外，您对数据长度的假设是正确的。

回到问题：

文本和rect部分非常基本，D3 101，所以让我们跳过它。圈子是这里有趣的部分。

我提出的解决方案涉及使用d3.range创建一个数组，其元素数（或长度）由numberOfCircles指定。这涉及两个选择。

首先，我们创建组（这里，scale显然是一个比例）：

var circlesGroups = svg.selectAll(null)
  .data(data)
  .enter()
  .append("g")
  .attr("transform", function(d) {
    return "translate(20," + scale(d.name) + ")"
  });

然后我们创建圈子。请注意d3.range：

var circles = circlesGroups.selectAll(null)
  .data(function(d) {
    return d3.range(d.numberOfCircles)
  })
  .enter()
  .append("circle")
  //etc...

这是一个演示，我正在更改数据中的numberOfCircles以绘制更多圆圈：

var width = 500,
  height = 200;
var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var data = [{
    "name": "A",
    "WidthOfRect": 50,
    "justAnotherText": "250",
    "numberOfCircles": 13
  },
  {
    "name": "B",
    "WidthOfRect": 150,
    "justAnotherText": "350",
    "numberOfCircles": 22
  },
  {
    "name": "C",
    "WidthOfRect": 250,
    "justAnotherText": "450",
    "numberOfCircles": 17
  }
];

var scale = d3.scalePoint()
  .domain(data.map(function(d) {
    return d.name
  }))
  .range([20, height - 20])
  .padding(0.5);

var colorScale = d3.scaleOrdinal(d3.schemeCategory10);

var circlesGroups = svg.selectAll(null)
  .data(data)
  .enter()
  .append("g")
  .attr("transform", function(d) {
    return "translate(20," + scale(d.name) + ")"
  })
  .style("fill", function(d) {
    return colorScale(d.name)
  })

var circles = circlesGroups.selectAll(null)
  .data(function(d) {
    return d3.range(d.numberOfCircles)
  })
  .enter()
  .append("circle")
  .attr("r", 5)
  .attr("cx", function(d) {
    return 10 + 12 * d
  });

var axis = d3.axisLeft(scale)(svg.append("g").attr("transform", "translate(20,0)"));

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

PS：我正在使用D3 v5。

D3 Javascript - 使用数据绑定

1 个答案: