如何在给定的示例d3js中填充各条之间的区域

Question

我想创造出这样的东西

​

​

我认为它是一个水平堆叠的条形图与扭转。我需要一些关于如何转换这个水平叠加条形图的指导

    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())
});

或者至少看起来像那样。我面临的第一个问题是如何对齐堆叠的条形图。意思是如果移除Y轴并使所有杆中心对齐。

Answer 1

如何对所有的堆栈进行居中。

您当前的实现这里。

应答通过图的中心旋转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)
    });

完整的工作代码这里。

我添加了一些注释来帮助您理解代码。