[英]how to fill the area between the bars in the given example d3js
我正在尝试创建这样的东西
我认为它是水平堆叠的条形图。 我需要一些有关如何转换此水平堆积条形图的准则
state.each(function(d,i) {
//var line = focus.append("line").style("stroke", "black")
//.attr("x1", x11(450))
//.attr("y1", y(585))
//.attr("x2", that.options.width - 210)
//.attr("y2", that.options.height-(that.options.height - 20)).style("shape-rendering","auto");
d3.select(this).append("circle").attr("cx",this.getBBox().width).attr("cy",this.getBBox().y).attr("r",2)
d3.select(this).append("circle").attr("cx",this.getBBox().x).attr("cy",this.getBBox().y).attr("r",2)
d3.select(this).append("circle").attr("cx",(this.getBBox().x)).attr("cy",this.getBBox().height+this.getBBox().y).attr("r",2)
d3.select(this).append("circle").attr("cx",(this.getBBox().x+this.getBBox().width-4)).attr("cy",this.getBBox().height+this.getBBox().y-2).attr("r",2)
console.log(this.getBBox())
});
或至少看起来像那样。 我面临的第一个问题是使对齐的条形图居中对齐。 表示是否删除yaxis并使所有条形居中对齐。
如何居中所有堆栈。
您当前的实现在这里 。
回答这个旋转通过90度的曲线图的中心在代码如下所示
var svg = d3.select("body").append("svg")
.attr("id", "mySVG")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")rotate(90," + width / 2 + "," + height / 2 + ")");
var legend = d3.select("svg").append("g");
这将旋转图,看起来像这样 。
接下来,如何在图表中显示图例。
//this will get the last g(group) element as we want to attach the legend to it
var lastG = d3.select(d3.selectAll(".state")[0].pop());
//this will get all the rectangles in the last group
var lastRect = d3.select(d3.selectAll(".state")[0].pop()).selectAll("rect");
//to get the bbox's y (since its rotated by 90 so x will become y)
var lastx = lastG.node().getBBox().y;
var lineFunction = d3.svg.line()
.x(function (d) {
return d.x;
})
.y(function (d) {
return d.y;
})
.interpolate("step-before");
//to each rectangle in the last group
lastRect[0].forEach(function (d, i) {
//make an svg point
var point = document.getElementById("mySVG").createSVGPoint();
point.x = (d3.select(d).attr("x") + +parseFloat(d3.select(d).attr("width")));
point.y = (parseFloat(d3.select(d).attr("y")) + parseFloat(d3.select(d).attr("height")));
//the point after rotation moves to the new position.
var newPoint = point.matrixTransform(d.getScreenCTM());
//making a circle and appending to the legend group
legend.append("circle").attr("r", 2).attr("cx", newPoint.x).attr("cy", newPoint.y).style("fill", "red").attr("class", "entry");
var x1 = lastx;
var y1 = newPoint.y + 50 + (10 * i);
legend.append("circle").attr("r", 2).attr("cx", x1).attr("cy", y1).style("fill", "red").attr("class", "entry");
//making the line with start point and end point
var lineData = [{
x: newPoint.x,
y: newPoint.y
}, {
x: x1,
y: y1
}];
//make the line and append it to legend
legend.append("path")
.attr("d", lineFunction(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");
//adding the text with label
legend.append("text").attr("x", x1+20).attr("y", y1).text(d3.select(d).data()[0].name)
});
完整的工作代码在这里 。
我添加了注释以帮助您理解代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.