如何在d3堆叠发散条形图中定义x属性，以使条形来自右边？

问题描述

我正在尝试创建分散的堆积条形图。我有两个svg区域-一个代表赞成票，一个代表不票。我需要没有表决权（图像左侧的条形：https://i.stack.imgur.com/NJveR.png）从秤的右侧开始并朝秤的左侧伸出。这些条形是在矩形部分的selNo选择中创建的。创建这些条形时，应如何定义x属性，以使这些条形从右开始？我尝试了各种加减宽度，更改比例，转换矩形的组合。我只是似乎无法使其移动到想要的位置！

完整代码：

var margin = { top: 50,right: 5,bottom: 20,left: 5 },width = 450 - margin.left - margin.right,height = 800 - margin.top - margin.bottom;

var svgNo = d3.select("#chart").append("svg")
    .attr("width",width + margin.left + margin.right)
    .attr("height",height + margin.top + margin.bottom)
    .attr("id","svgNo")
    .append("g")
    .attr("transform","translate(" + margin.left + "," + margin.top + ")");

var svgYes = d3.select("#chart").append("svg")
    .attr("width","svgYes")
    .append("g")
    .attr("transform"," + margin.top + ")");

var VotesNo = [];
var VotesYes = [];

/////////GET DATA/////////////

//access Votes route in Flask app
d3.json("/Votes").then(function (data) {

    //loop through objects in route
    data.forEach(function (d) {

        //convert data to numeric
        demYes = +d.democratic.yes
        demNo = +d.democratic.no
        repYes = +d.republican.yes
        repNo = +d.republican.no
        indYes = +d.independent.yes
        indNo = +d.independent.no


        //push desired data to arrays
        VotesYes.push(
            {
                "id": d._id,"name": d.bill.bill_id,"question": d.question,"description": d.description,"demYes": demYes,"repYes": repYes,"indYes": indYes,})
        VotesNo.push(
            {
                "id": d._id,"demNo": demNo,"repNo": repNo,"indNo": indNo,})
    });
    /////////////STACK GENERATORS//////////////

    //create stack generator for YES Votes
    var stackGenYes = d3.stack()
        .keys(["demYes","repYes","indYes"]) //keys from VotesYes
        .order(d3.stackorderDescending)   
    //use generator to create data array
    var stackedSeriesYes = stackGenYes(VotesYes);
    console.log(stackedSeriesYes);

    //create stack generator for NO Votes
    var stackGenNo = d3.stack()
        .keys(["demNo","repNo","indNo"]) //keys from VotesNo
    //use generator to create data array
    var stackedSeriesNo = stackGenNo(VotesNo);
    console.log(stackedSeriesNo);

    /////////////SCALE FUNCTIONS////////////

    //assign colors to parties
    var colorScale = d3.scaleOrdinal()
        .domain(["demYes","indYes"])
        .range(["#086fad","#c7001e","#8A2BE2"]);

    var yScale = d3.scaleBand()
        .domain(VotesYes.map(d => d.id)) //unique identifiers
        .range([0,height])
        .padding(0.1);

    var xScaleYes = d3.scaleLinear()
        .domain([0,535]) //num members of congress
        .range([0,width]);

    var xScaleNo = d3.scaleLinear()
        .domain([0,535])
        .range([width,0]);

    ////////////////RECTANGLES////////////////

    //create g tags for each YES key
    var selYes = d3.select("#svgYes")
        .select('g')
        .selectAll('g.seriesYes')
        .data(stackedSeriesYes)
        .join('g')
        .classed('series',true)
        .style('fill',(d) => colorScale(d.key)); //assign color
    //create YES bars
    selYes.selectAll('rect')
        .data(d => d)
        .join('rect')
        .attr('width',d => xScaleYes(d[1]) - xScaleYes(d[0])) //length of bars
        .attr('x',d => xScaleYes(d[0])) //bar starting point (x)
        .attr('y',d => yScale(d.data.id)) //bar starting point (y)
        .attr('height',32) //thickness of bar

    //create g tags for each NO key
    var selNo = d3.select("#svgNo")
        .select('g')
        .selectAll('g.seriesNo')
        .data(stackedSeriesNo)
        .join('g')
        .classed('series',(d) => colorScale(d.key));
    //create NO bars
    selNo.selectAll('rect')
        .data(d => d)
        .join('rect')
        .attr('width',d => xScaleNo(d[0]) - xScaleNo(d[1])) //length of bars
        .attr('x',d => width - xScaleNo(d[0])) //bar starting point (x)
        .attr('y',d => yScale(d.data.id)) //bar starting point(y)
        .attr('height',32); //thickness of bar
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript stackedbarseries