javascript - 如何在 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", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("id", "svgYes")
.append("g")
.attr("transform", "translate(" + margin.left + "," + 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,
"name": d.bill.bill_id,
"question": d.question,
"description": d.description,
"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", "repYes", "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', true)
.style('fill', (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
});
解决方案
推荐阅读
- python - 通过 google colab 将文件保存到 google 驱动器时出错
- javascript - 突出显示悬停行的特定表格单元格
- spring - Spring Redis - @RedisHash 动态设置 timeToLive
- r - 估计随着时间推移主题流行度对 STM 的影响
- android - 用整数更改进度条最大值
- javascript - JSP在动态生成的表行中获取输入标签的值
- google-apps-script - 触发器应该每 5 分钟激活一次,但它不会发生
- c++ - 用于分析多个数据结构的 massif-visualizer
- react-native - 如何正确进行注册
- python - 使用自定义损失函数创建 Keras 模型的函数只能工作一次