Question

我想使用D3从JSON文件生成图表。如何组合/关联条形图和气泡图，这样当您点击它时，它应该为您提供图例中两个图表的详细信息。

每个气泡必须位于每个气杆的下方和中心。它必须共享条形图的x轴。

它们有两种不同的数据源。

没有。 bar =气泡数

Answer 1

我创建了xscale

var xScale =  d3.scale.ordinal() .domain( d3.range(dataset.length))
                    .rangePoints([0, w-50]);

绘制条形图和圆形时共享相同的比例。

I have changed your codepen code

以下是更改后的完整代码

svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", function(d,i) {
    //return i * (w / dataset.length);
   return xScale(i) ;
  })
  .attr("y", function(d) {
    return h - (d * 10);
  })
  .attr("width", barWidth)
  .attr("height", function(d) {
    return d * 10;
  })
  .attr("fill","#d38e71");

var circles = svg.selectAll("circle")
  //.data(dataset)
.data(num)
  .enter()
.append("a")
    .attr("xlink:href", "http://google.com")
.attr("xlink:title",function(d){
  return "No. of campagins sent - "+d;

})
.attr("target","_blank")
  .append("circle");

circles.attr("cx", function(d,i) {
 /*  return  i* (wB / dataset.length)+(wB / dataset.length)/2-2;*/
  return (xScale(i) + barWidth/2);
  })
  .attr("cy", function(d) {
    return hB-35;
  })
  .attr("r", function(d) {
    return rScale(d);
  })

请注意以下条形码

 .attr("x", function(d,i) {
    //return i * (w / dataset.length);
   return xScale(i) ;
  })

请注意以下圆圈代码。

circles.attr("cx", function(d,i) {
 /*  return  i* (wB / dataset.length)+(wB / dataset.length)/2-2;*/
  return (xScale(i) + barWidth/2);
  })

一个建议

通过此语句设置条的宽度（w / dataset.length - barPadding）这可以存储在变量中。因此，它不会计算图表中的每个成员。

如何在D3中关联并组合条形图和气泡图？

1 个答案: