Javascript 使用d3.js在一个图形中显示一条直线的堆叠柱状图

我能用D3在一张图中画一条线的叠层柱形图吗

以下是一个例子：

---

非常感谢您的帮助。

为了实现您的可视化，我合并了以下内容：

制作刻度和轴：

//x axis is ordinal
var x = d3.scale.ordinal()
    .rangeRoundBands([0, width-150], .1);
//y left axis is linear for head count
var y = d3.scale.linear()
    .rangeRound([height, 0]);
//this scale is for the average
y1 = d3.scale.linear().range([height, 0]).domain([0,100]);//marks can have min 0 and max 100
// y axis right for average marks.
var yAxisRight = d3.svg.axis().scale(y1)
    .orient("right").ticks(5); 

然后制作如下矩形和折线图（添加注释）：

编辑

是的，您可以通过插值使直线弯曲：

var averageline = d3.svg.line()
      .x(function(d) { return x(d.Name) + x.rangeBand()/2; })
      .y(function(d) { return y1(d.Average); }).interpolate("basis");

阅读

工作代码

---

希望这有帮助

一张图中的线是什么意思？假设有三个属性：其中两个是班级中的学生群体（男性和女性），它们由堆叠的列表示。假设还有另一个属性，叫做全班学生的平均分数，我想用一条线表示，如上图所示。所以右边的轴将显示人口和左边的轴分数？是的，你说得对。谢谢你的回答。我能把那条线作为曲率吗？如果是，我怎么办？所谓曲率，我的意思是在这些点上没有锐边。并在图/图中所示的条形图上放置一些图像。我们如何使用d3.js在问题中的图中所示的条形图顶部添加图像？更新了fiddle for image here phew您需要雇用我LOL检查此LOL！我真的很感激你的耐心。我对D3.js真的很陌生。再次非常感谢您！：）

var averageline = d3.svg.line()
      .x(function(d) { return x(d.Name) + x.rangeBand()/2; })
      .y(function(d) { return y1(d.Average); }).interpolate("basis");