使用数据值在d3 js条形图中添加背景色 [英] Adding background color in d3 js bar chart using data values
本文介绍了使用数据值在d3 js条形图中添加背景色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我创建了一个非常简单的条形图。现在,我想为创建的条形图添加一些样式。如示例中所示,当x值大于200时,我想添加红色。我尝试了各种样式的填充和背景,但无法获得预期的结果。任何想法现在怎么办?
新增代码
< script> var mydata = {min:68.9813,avg:177.5037,max:672.6713,values:[{bin:-50.0, %:0.0,samples:0},{bin:0.0,percent:0.0,samples:0},{bin:50.0,percent:6.7028,samples },{bin:100.0,percent:32.2897,samples:2407},{bin:150.0,percent:32.4565,samples:3207},{bin:200.0 %:17.1745,samples:2064},{bin:250.0,percent:6.1833,samples:940},{bin:300.0,percent:2.4971,samples },{bin:350.0,percent:1.2438,samples:279},{bin:400.0,percent:0.9262,samples:182},{bin:450.0百分比:0.2781样本样品:24,,样品:样品:25,样品:样品百分比:0.0962 :%:0.0535,samples:24},{bin:650.0,percent:0.0243,samples:6},{bin:700.0percent样本:0,{bin:750.0,percent:0.0,samples:0},{bin:800.0,percent:0.0,samples:0},{bin :%:0.0,samples:0},{bin:900.0,percent:0.0,samples:0},{bin:950.0,percent:0.0,样本:0},{bin:1000.0,percent:0.0,samples:0}],index:7,time_h:13.8529,stddev:67.8836,samples }; //设置graphvar的尺寸和边距margin = {top:20,right:20,bottom:30,left:40},width = 960 - margin.left - margin.right,height = 500 - margin。 top - margin.bottom; //设置rangesvar x = d3.scaleBand().range([0,width]).padding(0.1); var y = d3.sc aleLinear().range([height,0]);函数make_x_gridlines(){return d3.axisBottom(x).ticks(2)} // y轴中的网格函数function make_y_gridlines(){return d3.axisLeft(y)。 ticks(10)} //将svg对象附加到页面的主体上//将'group'元素附加到'svg'//将'group'元素移动到左上角marginvar svg = d3.select(# (width,width + margin.left + margin.right).attr(height,height + margin.top + margin.bottom).append(g)。append(svg).attr ).attr(transform,translate(+ margin.left +,+ margin.top +)).style('fill','black');; //获取数据// d3 .csv(sales.csv,function(error,data){// if(error)throw error; // //格式化数据// data.forEach(function(d){// d.sales = + d.sales; //}); //缩放域中数据的范围x.domain(mydata.values.map(function(d){return d.bin;})); y.domain([0,d3.max(mydata.values,function(d){return d.percent;})]); //添加条形图的矩形svg.selectAll(.bar).data(mydata.values).enter()。append(rect).attr(class,bar).attr( x,函数(d){return x(d.bin)+(x.bandwidth()-4)/ 2;}).attr(width,Math.min(x.bandwidth(),5) ).attr(y,function(d){return y(d.percent);}).attr(height,function(d){return height -y(d.percent);}); svg.append(g).attr(class,grid).attr(transform,translate(0,+ height +)).call(make_x_gridlines().tickSize(--height ).tickFormat()); //添加Y gridliningvg.append(g).attr(class,grid).call(make_y_gridlines().tickSize(-width).tickFormat( )); //添加x Axissvg.append(g).attr(transform,translate(0,+ height +)).call(d3.axisBottom(x)); // add y Axissvg.append(g).call(d3.axisLeft(y));< / script>
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< / script> ;< script src =../ js / d3.v4.min.js>< / script>
解决方案
您可以使用在黑色条之前附加的简单SVG矩形做到这一点。对于水平定位矩形,只需使用 x
比例:
var redBox = svg.append(rect)
.attr(x,x(200)+ x.bandwidth()/ 2)
.attr(y,0)
.attr(width,x(x.domain()[x.domain()。length - 1]) - x(200)+ x.bandwidth()/ 2)
.attr(height ,height)
.attr(fill,red)
.attr(opacity,0.2);
以下是您的代码:
<
var mydata = {min:68.9813,avg:177.5037,max:672.6713,值:[{bin:-50.0,percent:0.0,samples:0},{bin:0.0,percent:0.0,samples:0},{bin 50.0百分比:6.7028样本:309},{bin:100.0,百分比:32.2897,样本:2407},{bin:150.0,百分比:32.4565 :3207,bin:200.0,percent:17.1745,samples:2064},{bin:250.0,percent:6.1833,samples:940},{bin 300.0,百分比:2.4971,样本:444},{bin:350.0,百分比:1.2438,样本:279},{bin:400.0 :182},{ bin:450.0,percent:0.2781,samples:71},{bin:500.0,percent:0.0962,samples:24},{bin:550.0percent 0.074samples:25},{bin:600.0,percent:0.0535,samples:24},{bin:650.0,percent:0.0243,samples:6} bin:700.0,percent:0.0,samples:0},{bin:750.0,percent:0.0,samples:0},{bin:800.0percent 0.0samples:0},{bin:850.0,percent:0.0,samples:0},{bin:900.0,percent:0.0,samples:0} bin:950.0,percent:0.0,samples:0},{bin:1000.0,percent:0.0,samples:0}],index:7,time_h: 13.8529,stddev:67.8836,samples:9982}; //设置graphvar的尺寸和边距margin = {top:20,right:20,bottom:30,left:40},width = 960 - margin 。left - margin.right,height = 500 - margin.top - margin.bottom; //设置r angesvar x = d3.scaleBand().range([0,width]).padding(0.1); var y = d3.scaleLinear().range([height,0]); function make_x_gridlines(){return d3.axisBottom (x).ticks(2)} // y轴中的网格函数function make_y_gridlines(){return d3.axisLeft(y).ticks(10)} //将svg对象追加到页面主体上//追加' ('body')。append(svg).attr(width,width + margin.left +margin)将组件元素移动到'svg'// //将'group'元素移动到左上角marginvar svg = d3.select margin.right).attr(height,height + margin.top + margin.bottom).append(g).attr(transform,translate(+ margin.left +,+ margin。 ('fill','black');; //获取数据// d3.csv(sales.csv,function(error,data){// if(error)throw错误; // //格式化数据// data.forEach(function(d){// d.sales = + d.sales; //}); //缩放domainsx.domain中数据的范围( mydata.values.map(function(d){return d.bin;})); y.domain([0,d3.max(mydat a.values,function(d){return d.percent;})]); var redBox = svg.append(rect).attr(x,x(200)+ x.bandwidth()/ 2) .attr(y,0).attr(width,x(x.domain()[x.domain()。length - 1]) - x(200)+ x.bandwidth()/ 2)。 attr(height,height).attr(fill,red).attr(opacity,0.2); //添加条形图的矩形chartsvg.selectAll(.bar).data(mydata.values).enter()。append(rect).attr(class,bar).attr( x,函数(d){return x(d.bin)+(x.bandwidth()-4)/ 2;}).attr(width,Math.min(x.bandwidth(),5)) .attr(y,function(d){return y(d.percent);}).attr(height,function(d){return height -y(d.percent);}); svg.append (g).attr(class,grid).attr(transform,translate(0,+ height +)).call(make_x_gridlines().tickSize(--height).tickFormat ()); //添加Y gridliningvg.append(g).attr(class,grid).call(make_y_gridlines().tickSize(-width).tickFormat()); //添加x Axissvg.append(g).attr(transform,translate(0,+ height +)).call(d3.axisBottom(x)); //添加y Axissvg .append(g).call(d3.axisLeft(y));
< script src =https://d3js.org/d3.v4.min.js>< / script>
I created a bar chart which was quite simple. Now, I want to add some style to the created bar chart. As shown in the example I want to add red color when x value is greater than 200. I tried various style fill and background but couldn't get the expected result. Any idea how to approach now?
Added the code
<script>
var mydata = {
"min": 68.9813,
"avg": 177.5037,
"max": 672.6713,
"values": [{
"bin": -50.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 0.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 50.0,
"percent": 6.7028,
"samples": 309
}, {
"bin": 100.0,
"percent": 32.2897,
"samples": 2407
}, {
"bin": 150.0,
"percent": 32.4565,
"samples": 3207
}, {
"bin": 200.0,
"percent": 17.1745,
"samples": 2064
}, {
"bin": 250.0,
"percent": 6.1833,
"samples": 940
}, {
"bin": 300.0,
"percent": 2.4971,
"samples": 444
}, {
"bin": 350.0,
"percent": 1.2438,
"samples": 279
}, {
"bin": 400.0,
"percent": 0.9262,
"samples": 182
}, {
"bin": 450.0,
"percent": 0.2781,
"samples": 71
}, {
"bin": 500.0,
"percent": 0.0962,
"samples": 24
}, {
"bin": 550.0,
"percent": 0.074,
"samples": 25
}, {
"bin": 600.0,
"percent": 0.0535,
"samples": 24
}, {
"bin": 650.0,
"percent": 0.0243,
"samples": 6
}, {
"bin": 700.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 750.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 800.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 850.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 900.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 950.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 1000.0,
"percent": 0.0,
"samples": 0
}],
"index": 7,
"time_h": 13.8529,
"stddev": 67.8836,
"samples": 9982
};
//set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// set the ranges
var x = d3.scaleBand()
.range([0, width])
.padding(0.1);
var y = d3.scaleLinear()
.range([height, 0]);
function make_x_gridlines() {
return d3.axisBottom(x)
.ticks(2)
}
// gridlines in y axis function
function make_y_gridlines() {
return d3.axisLeft(y)
.ticks(10)
}
// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("#co_histogram").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")")
.style('fill', 'black');;
// get the data
// d3.csv("sales.csv", function(error, data) {
// if (error) throw error;
// // format the data
// data.forEach(function(d) {
// d.sales = +d.sales;
// });
// Scale the range of the data in the domains
x.domain(mydata.values.map(function(d) { return d.bin; }));
y.domain([0, d3.max(mydata.values, function(d) { return d.percent; })]);
// append the rectangles for the bar chart
svg.selectAll(".bar")
.data(mydata.values)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.bin) + (x.bandwidth()-4) / 2; })
.attr("width", Math.min(x.bandwidth(),5))
.attr("y", function(d) { return y(d.percent); })
.attr("height", function(d) { return height - y(d.percent); });
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_gridlines()
.tickSize(-height)
.tickFormat("")
);
// add the Y gridlines
svg.append("g")
.attr("class", "grid")
.call(make_y_gridlines()
.tickSize(-width)
.tickFormat("")
);
// add the x Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// add the y Axis
svg.append("g")
.call(d3.axisLeft(y));
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../js/d3.v4.min.js"></script>
解决方案
You can do that using a simple SVG rectangle appended before the black bars. For horizontally positioning the rectangle, just use your x
scale:
var redBox = svg.append("rect")
.attr("x", x(200) + x.bandwidth() / 2)
.attr("y", 0)
.attr("width", x(x.domain()[x.domain().length - 1]) - x(200) + x.bandwidth() / 2)
.attr("height", height)
.attr("fill", "red")
.attr("opacity", 0.2);
Here is your code with that change:
var mydata = {
"min": 68.9813,
"avg": 177.5037,
"max": 672.6713,
"values": [{
"bin": -50.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 0.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 50.0,
"percent": 6.7028,
"samples": 309
}, {
"bin": 100.0,
"percent": 32.2897,
"samples": 2407
}, {
"bin": 150.0,
"percent": 32.4565,
"samples": 3207
}, {
"bin": 200.0,
"percent": 17.1745,
"samples": 2064
}, {
"bin": 250.0,
"percent": 6.1833,
"samples": 940
}, {
"bin": 300.0,
"percent": 2.4971,
"samples": 444
}, {
"bin": 350.0,
"percent": 1.2438,
"samples": 279
}, {
"bin": 400.0,
"percent": 0.9262,
"samples": 182
}, {
"bin": 450.0,
"percent": 0.2781,
"samples": 71
}, {
"bin": 500.0,
"percent": 0.0962,
"samples": 24
}, {
"bin": 550.0,
"percent": 0.074,
"samples": 25
}, {
"bin": 600.0,
"percent": 0.0535,
"samples": 24
}, {
"bin": 650.0,
"percent": 0.0243,
"samples": 6
}, {
"bin": 700.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 750.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 800.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 850.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 900.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 950.0,
"percent": 0.0,
"samples": 0
}, {
"bin": 1000.0,
"percent": 0.0,
"samples": 0
}],
"index": 7,
"time_h": 13.8529,
"stddev": 67.8836,
"samples": 9982
};
//set the dimensions and margins of the graph
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// set the ranges
var x = d3.scaleBand()
.range([0, width])
.padding(0.1);
var y = d3.scaleLinear()
.range([height, 0]);
function make_x_gridlines() {
return d3.axisBottom(x)
.ticks(2)
}
// gridlines in y axis function
function make_y_gridlines() {
return d3.axisLeft(y)
.ticks(10)
}
// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")")
.style('fill', 'black');;
// get the data
// d3.csv("sales.csv", function(error, data) {
// if (error) throw error;
// // format the data
// data.forEach(function(d) {
// d.sales = +d.sales;
// });
// Scale the range of the data in the domains
x.domain(mydata.values.map(function(d) {
return d.bin;
}));
y.domain([0, d3.max(mydata.values, function(d) {
return d.percent;
})]);
var redBox = svg.append("rect")
.attr("x", x(200) + x.bandwidth()/2)
.attr("y", 0)
.attr("width", x(x.domain()[x.domain().length - 1]) - x(200) + x.bandwidth() / 2)
.attr("height", height)
.attr("fill", "red")
.attr("opacity", 0.2);
// append the rectangles for the bar chart
svg.selectAll(".bar")
.data(mydata.values)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.bin) + (x.bandwidth() - 4) / 2;
})
.attr("width", Math.min(x.bandwidth(), 5))
.attr("y", function(d) {
return y(d.percent);
})
.attr("height", function(d) {
return height - y(d.percent);
});
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_gridlines()
.tickSize(-height)
.tickFormat("")
);
// add the Y gridlines
svg.append("g")
.attr("class", "grid")
.call(make_y_gridlines()
.tickSize(-width)
.tickFormat("")
);
// add the x Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// add the y Axis
svg.append("g")
.call(d3.axisLeft(y));
<script src="https://d3js.org/d3.v4.min.js"></script>
这篇关于使用数据值在d3 js条形图中添加背景色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文