在d3js条形图中添加垂直线
[英]Add vertical line to d3js bar chart
问题描述
Based on this example , I'm trying to replicate a bar chart. 
基于此示例 ，我正在尝试复制条形图。 Then I have two datasets: one for the bar chart, and a single price. 然后，我有两个数据集：一个用于条形图，一个价格。
What I want to do with that single price is to position it according to the bars. 我要用这个单一价格做的就是根据条形定位它。 Check the code: 检查代码：
var price_data = [
{'priceRangeStart':'4000000','numberOfProperties':100},
{'priceRangeStart':'4100000','numberOfProperties':256},
{'priceRangeStart':'4200000','numberOfProperties':773},
{'priceRangeStart':'4300000','numberOfProperties':334},
{'priceRangeStart':'4400000','numberOfProperties':587},
{'priceRangeStart':'4500000','numberOfProperties':400},
{'priceRangeStart':'4600000','numberOfProperties':700},
{'priceRangeStart':'4700000','numberOfProperties':150},
{'priceRangeStart':'4800000','numberOfProperties':229},
{'priceRangeStart':'4900000','numberOfProperties':500},
{'priceRangeStart':'5000000','numberOfProperties':125},
{'priceRangeStart':'5100000','numberOfProperties':170},
{'priceRangeStart':'5200000','numberOfProperties':290},
{'priceRangeStart':'5300000','numberOfProperties':660},
{'priceRangeStart':'5400000','numberOfProperties':450},
{'priceRangeStart':'5500000','numberOfProperties':359},
{'priceRangeStart':'5600000','numberOfProperties':740},
{'priceRangeStart':'5700000','numberOfProperties':894},
{'priceRangeStart':'5900000','numberOfProperties':547},
{'priceRangeStart':'6000000','numberOfProperties':1250}
];
var property_price = 5050000;
var loadPriceComparisonChart = function (data, single_price) {
// removing svg/tip artifacts
d3.selectAll('.price-comparison-tip').remove();
d3.select(elem[0]).select('svg').remove();
// variables and helpers
var margin = {top: 0, right: 20, bottom: 25, left: 0},
width = 370,
height = 200;
var formatComma = d3.format(',');
// responsive SVG
// create responsive svg container for the graph
var svg = d3.select(elem[0])
.append('div')
.classed('svg-price-comparison-container', true)
.append('svg')
.attr('preserveAspectRatio', 'none')
.attr('viewBox', '0 0 370 225')
//class to make it responsive
.classed('svg-content-responsive', true);
// creating x and y scales
var x = d3.scaleBand().rangeRound([0, width]).paddingOuter(0.5).paddingInner(0.6),
x1 = d3.scaleBand().rangeRound([0, width]),
y = d3.scaleLinear().rangeRound([height, 0]),
y1 = d3.scaleLinear().rangeRound([0, (height - 100)]); //
// creating the group object
var g = svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
// processing the data
var new_dataset = data;
var transformation = [];
transformation = new_dataset.map(el => (
{priceRangeStart: el.priceRangeStart, numberOfProperties: el.numberOfProperties}
));
transformation.forEach(function(d) {
d.priceRangeStart = +d.priceRangeStart;
d.numberOfProperties = +d.numberOfProperties;
return d;
});
// using lodash
var minValue = _.first(transformation).priceRangeStart;
var maxValue = _.last(transformation).priceRangeStart;
// get max number of properties value
var maxNrProperties = d3.max(transformation, function(d) {return d.numberOfProperties;});
// x and y value domains
x.domain(transformation.map(function(d) {console.log(d.priceRangeStart);return d.priceRangeStart;}));
x1.domain(transformation.map(function(d) {return d.priceRangeStart;}));
y.domain([0, ((d3.max(transformation, function(d) {return d.numberOfProperties;})) + (1.15 * maxNrProperties))]);
y1.domain([0, (d3.max(transformation, function(d) {return d.numberOfProperties;}))]);
// create x axis (for guiding purposes) and then hide it
g.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('class', 'axis axis--x')
.call(d3.axisBottom(x))
.style('opacity', 0)
.selectAll('text').remove();
// text for min price value and translate it to the start position of the first bar
g.append('text')
.attr('transform', 'translate(' + (x(_.first(transformation).priceRangeStart)) + ' ,' + (height * 1.1) + ')')
.style('text-anchor', 'start')
.style('font-size', '12px')
.text('CHF ' + formatComma(minValue));
// text for max price value and translate it to the end position of the last bar
g.append('text')
.attr('transform', 'translate(' + (x(_.last(transformation).priceRangeStart) + x.bandwidth()) + ' ,' + (height * 1.1) + ')')
.style('text-anchor', 'end')
.style('font-size', '12px')
.text('CHF ' + formatComma(maxValue));
// apppend the grey bars to the graph and styling them
g.selectAll('.bar')
.data(transformation)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', function(d) {return x(d.priceRangeStart);})
.attr('y', function(d) {return height - y1(maxNrProperties);})
.attr('width', x.bandwidth())
.attr('height', function(d) {return y1(maxNrProperties);})
.style('fill', '#A4A9AD')
.style('opacity', 0.2);
// apppend the orange bars to the graph and styling them
g.selectAll(null)
.data(transformation)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', function(d) {return x(d.priceRangeStart);})
.attr('y', function(d) {return y(d.numberOfProperties);})
.attr('width', x.bandwidth())
.attr('height', function(d) {return height - y(d.numberOfProperties);})
.style('fill', '#EDAA00')
.style('opacity', 1);
// append dashed line to show single property price position
g.append('line')
.attr('class', 'zero')
.attr('x1', function(d) {return x1(single_price);})
.attr('y1', function(d) {return (y1(maxNrProperties) - 10);})
.attr('x2', x(0))
.attr('y2', function(d) {return height;})
.style('stroke', '#003A5D')
.style('stroke-width', 1)
.style('stroke-dasharray', 6)
.attr('transform', 'translate(30,0)');
As you see by the single price of 5050000 should be positioned between the bars for the ranges 5000000 and 5100000. That single price should be a vertical dashed line instead of another bar, as you may see in the code. 如您所见，单价5050000应该位于5000000到5100000范围的条形之间。该单价应该是垂直虚线，而不是如代码中所示的另一个条形。 The problem is that I cannot position it correctly. 问题是我无法正确放置它。 I can't use the x domain I set for the bars for some reason. 由于某种原因，我无法使用为栏设置的x域。
In the end, it should look something like this: 最后，它应该看起来像这样： Any ideas?
有任何想法吗？
1 个解决方案
解决方案1
2 已采纳 2017-10-19 10:12:50
You made things complicated when you used those values as a categorical (qualitative) variable. 将这些值用作分类（定性）变量时，事情变得很复杂。 However, there is a solution: 但是，有一个解决方案：
You can get the value immediately below that single price in the x scale domain using d3.bisectLeft : 您可以使用d3.bisectLeft在x缩放域中立即获得低于该单一价格的值：
var lineIndex = d3.bisectLeft(x.domain(), property_price);
And then, using that index, get the x position of the line: 然后，使用该索引获取行的x位置：
.attr("x1", x(x.domain()[lineIndex]))
.attr("x2", x(x.domain()[lineIndex]))
Here is your code with that change: 这是您所做的更改的代码：
var data = [{ 'priceRangeStart': '4000000', 'numberOfProperties': 100 }, { 'priceRangeStart': '4100000', 'numberOfProperties': 256 }, { 'priceRangeStart': '4200000', 'numberOfProperties': 773 }, { 'priceRangeStart': '4300000', 'numberOfProperties': 334 }, { 'priceRangeStart': '4400000', 'numberOfProperties': 587 }, { 'priceRangeStart': '4500000', 'numberOfProperties': 400 }, { 'priceRangeStart': '4600000', 'numberOfProperties': 700 }, { 'priceRangeStart': '4700000', 'numberOfProperties': 150 }, { 'priceRangeStart': '4800000', 'numberOfProperties': 229 }, { 'priceRangeStart': '4900000', 'numberOfProperties': 500 }, { 'priceRangeStart': '5000000', 'numberOfProperties': 125 }, { 'priceRangeStart': '5100000', 'numberOfProperties': 170 }, { 'priceRangeStart': '5200000', 'numberOfProperties': 290 }, { 'priceRangeStart': '5300000', 'numberOfProperties': 660 }, { 'priceRangeStart': '5400000', 'numberOfProperties': 450 }, { 'priceRangeStart': '5500000', 'numberOfProperties': 359 }, { 'priceRangeStart': '5600000', 'numberOfProperties': 740 }, { 'priceRangeStart': '5700000', 'numberOfProperties': 894 }, { 'priceRangeStart': '5900000', 'numberOfProperties': 547 }, { 'priceRangeStart': '6000000', 'numberOfProperties': 1250 }]; var property_price = 5050000; // variables and helpers var margin = { top: 0, right: 20, bottom: 25, left: 0 }, width = 370, height = 200; var formatComma = d3.format(','); // responsive SVG // create responsive svg container for the graph var svg = d3.select("body") .append('svg') .attr('preserveAspectRatio', 'none') .attr('viewBox', '0 0 370 225') //class to make it responsive .classed('svg-content-responsive', true); // creating x and y scales var x = d3.scaleBand().rangeRound([0, width]).paddingOuter(0.5).paddingInner(0.6), x1 = d3.scaleBand().rangeRound([0, width]), y = d3.scaleLinear().rangeRound([height, 0]), y1 = d3.scaleLinear().rangeRound([0, (height - 100)]); // // creating the group object var g = svg.append('g') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); // processing the data var new_dataset = data; var transformation = []; transformation = new_dataset.map(el => ({ priceRangeStart: el.priceRangeStart, numberOfProperties: el.numberOfProperties })); transformation.forEach(function(d) { d.priceRangeStart = +d.priceRangeStart; d.numberOfProperties = +d.numberOfProperties; return d; }); // using lodash var minValue = _.first(transformation).priceRangeStart; var maxValue = _.last(transformation).priceRangeStart; // get max number of properties value var maxNrProperties = d3.max(transformation, function(d) { return d.numberOfProperties; }); // x and y value domains x.domain(transformation.map(function(d) { return d.priceRangeStart; })); x1.domain(transformation.map(function(d) { return d.priceRangeStart; })); y.domain([0, ((d3.max(transformation, function(d) { return d.numberOfProperties; })) + (1.15 * maxNrProperties))]); y1.domain([0, (d3.max(transformation, function(d) { return d.numberOfProperties; }))]); // create x axis (for guiding purposes) and then hide it g.append('g') .attr('transform', 'translate(0,' + height + ')') .attr('class', 'axis axis--x') .call(d3.axisBottom(x)) .style('opacity', 0) .selectAll('text').remove(); // text for min price value and translate it to the start position of the first bar g.append('text') .attr('transform', 'translate(' + (x(_.first(transformation).priceRangeStart)) + ' ,' + (height * 1.1) + ')') .style('text-anchor', 'start') .style('font-size', '12px') .text('CHF ' + formatComma(minValue)); // text for max price value and translate it to the end position of the last bar g.append('text') .attr('transform', 'translate(' + (x(_.last(transformation).priceRangeStart) + x.bandwidth()) + ' ,' + (height * 1.1) + ')') .style('text-anchor', 'end') .style('font-size', '12px') .text('CHF ' + formatComma(maxValue)); // apppend the grey bars to the graph and styling them g.selectAll('.bar') .data(transformation) .enter().append('rect') .attr('class', 'bar') .attr('x', function(d) { return x(d.priceRangeStart); }) .attr('y', function(d) { return height - y1(maxNrProperties); }) .attr('width', x.bandwidth()) .attr('height', function(d) { return y1(maxNrProperties); }) .style('fill', '#A4A9AD') .style('opacity', 0.2); // apppend the orange bars to the graph and styling them g.selectAll(null) .data(transformation) .enter().append('rect') .attr('class', 'bar') .attr('x', function(d) { return x(d.priceRangeStart); }) .attr('y', function(d) { return y(d.numberOfProperties); }) .attr('width', x.bandwidth()) .attr('height', function(d) { return height - y(d.numberOfProperties); }) .style('fill', '#EDAA00') .style('opacity', 1); var lineIndex = d3.bisectLeft(x.domain(), property_price); var line = svg.append("line") .attr("x1", x(x.domain()[lineIndex]) - x.step() / 2 + x.bandwidth() / 2) .attr("x2", x(x.domain()[lineIndex]) - x.step() / 2 + x.bandwidth() / 2) .attr("y1", height - 100) .attr("y2", height) .style("stroke", "gray") .style("stroke-width", 2) .style("stroke-dasharray", "2,2")
<script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
D3js - 将垂直条形图更改为水平条形图 - D3js - change Vertical bar chart to Horizontal bar chart
D3JS条形图工具提示，可从垂直转换为水平 - D3JS Bar Chart Tooltip, translating from vertical to horizontal
在条形图的条形图内添加图像的可能性-d3js - Possibility to add images inside a bar of a bar chart - d3js
是否可以在 d3js 中的同一折线图上添加缩放和工具提示？ - Is it possible to add zoom and tooltip on the same line chart in d3js?
带有画笔滑块的d3js条形图 - d3js bar chart with brush slider
d3js-可排序的组条形图 - d3js - Sortable Group Bar Chart
D3js条形图中的未定义.call（） - Undefined .call() in D3js bar chart
D3js：条形图中的下拉更新 - D3js: Dropdown update in bar chart
排序水平条形图D3js - Sorting Horizontal Bar Chart D3js
堆积条形图D3js - Stacked Bar Chart D3js
相关标签