如何使用d3在条形图中添加标记
塞尔瓦
我需要使用 d3 创建一个条形图，并在起点和终点之间突出显示（如标记）。这是我的代码片段。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Simple Bar chart</title>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
body {
font-family: "Arial", sans-serif;
}
.bar {
fill: #5f89ad;
}
.highlight {
fill: #ff0;
}
.axis {
font-size: 13px;
}
.axis path,
.axis line {
fill: none;
display: none;
}
.label {
font-size: 13px;
}
</style>
</head>
<body>
<div id="graphic"></div>
<script>
var data = [{
"name": "Case 01",
"value": 2000,
"xValue": 500,
"slength": 100,
},
{
"name": "Case 02",
"value": 1290,
},
{
"name": "Case 03",
"value": 19000,
},
{
"name": "Case 04",
"value": 5000,
},
{
"name": "Case 05",
"value": 1600,
},
{
"name": "Case 06",
"value": 2600,
},
{
"name": "Case 07",
"value": 3000,
},
{
"name": "Case 08",
"value": 7000,
},
{
"name": "Case 09",
"value": 3290,
},
{
"name": "Case 10",
"value": 12000,
},
{
"name": "Case 11",
"value": 10000,
},
{
"name": "Case 12",
"value": 11600,
},
{
"name": "Case 13",
"value": 5600,
},
{
"name": "Case 14",
"value": 6000,
},{
"name": "Case 15",
"value": 8600,
},
{
"name": "Case 16",
"value": 4280,
},
{
"name": "Case 17",
"value": 9000,
},
{
"name": "Case 18",
"value": 5000,
},
{
"name": "Case 19",
"value": 4300,
},
{
"name": "Case 20",
"value": 2600,
},
{
"name": "Case 21",
"value": 6700,
},{
"name": "Case 22",
"value": 12000,
},
{
"name": "Case 23",
"value": 8290,
},
{
"name": "Case 24",
"value": 8000,
},
{
"name": "Case 25",
"value": 7600,
},
{
"name": "Case 26",
"value": 1600,
},
{
"name": "Case 27",
"value": 5500,
},
{
"name": "Case 28",
"value": 4400,
},{
"name": "Case 29",
"value": 8900,
},
{
"name": "Case 30",
"value": 6790,
},
{
"name": "Case 31",
"value": 11000,
},
{
"name": "Case 32",
"value": 5000,
},
{
"name": "Case 33",
"value": 6600,
},
{
"name": "Case 34",
"value": 7700,
},
{
"name": "Case 35",
"value": 3000,
}];
//sort bars based on value
data = data.sort(function (a, b) {
return d3.descending(a.name, b.name);
})
//set up SVG using margin conventions - we'll need plenty of room on the left for labels
var margin = {
top: 15,
right: 100,
bottom: 15,
left: 100
};
var width = window.innerWidth - margin.left - margin.right,
height = window.innerHeight- margin.top - margin.bottom;
var svg = d3.select("#graphic").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 + ")");
var x = d3.scale.linear()
.range([0, width])
.domain([0, d3.max(data, function (d) {
return d.value;
})]);
var y = d3.scale.ordinal()
.rangeRoundBands([height, 0], .1)
.domain(data.map(function (d) {
return d.name;
}));
//make y axis to show bar names
var yAxis = d3.svg.axis()
.scale(y)
//no tick marks
.tickSize(0)
.orient("left");
var gy = svg.append("g")
.attr("class", "y axis")
.call(yAxis)
var bars = svg.selectAll(".bar")
.data(data)
.enter()
.append("g")
//append rects
bars.append("rect")
.attr("class", "bar")
.attr("y", function (d) {
return y(d.name);
})
.attr("height", y.rangeBand())
.attr("x", 0)
.attr("width", function (d) {
return x(d.value);
})
//add a value label to the right of each bar
bars.append("text")
.attr("class", "label")
//y position of the label is halfway down the bar
.attr("y", function (d) {
return y(d.name) + y.rangeBand() / 2 + 4;
})
//x position is 3 pixels to the right of the bar
.attr("x", function (d) {
return x(d.value);
})
.style('fill', 'darkGray')
.text(function (d) {
return d.value;
});
</script>
</body>
</html>在此，我需要添加一个类似于此图像的标记
考虑使用堆叠条形图，但在这种情况下它不会工作，因为后面的行给出了整个值，突出显示的颜色给出了该文档中的搜索词，并且同一行可能会重复几次。
沙尚克
您可以添加第二组条形x并width根据标记的起点和终点分配和。
假设xValue是起点和slength高亮的宽度，这里是添加标记的相关代码：
// add markers
bars.append("rect")
.attr("class", "highlight")
.attr("y", function (d) {
return y(d.name);
})
.attr("height", y.rangeBand())
.attr("x", function (d) {
return x(d.xValue);
})
.attr("width", function (d) {
return x(d.xValue + d.slength);
});
代码片段（包括多行中的突出显示）：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Simple Bar chart</title>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
body {
font-family: "Arial", sans-serif;
}
.bar {
fill: #5f89ad;
}
.highlight {
fill: #ff0;
}
.axis {
font-size: 13px;
}
.axis path,
.axis line {
fill: none;
display: none;
}
.label {
font-size: 13px;
}
</style>
</head>
<body>
<div id="graphic"></div>
<script>
var data = [{
"name": "Case 01",
"value": 2000,
"xValue": 500,
"slength": 100,
},
{
"name": "Case 02",
"value": 1290,
"xValue": 300,
"slength": 50,
},
{
"name": "Case 03",
"value": 19000,
"xValue": 1000,
"slength": 300,
},
{
"name": "Case 04",
"value": 5000,
},
{
"name": "Case 05",
"value": 1600,
},
{
"name": "Case 06",
"value": 2600,
},
{
"name": "Case 07",
"value": 3000,
},
{
"name": "Case 08",
"value": 7000,
},
{
"name": "Case 09",
"value": 3290,
},
{
"name": "Case 10",
"value": 12000,
},
{
"name": "Case 11",
"value": 10000,
},
{
"name": "Case 12",
"value": 11600,
},
{
"name": "Case 13",
"value": 5600,
},
{
"name": "Case 14",
"value": 6000,
},{
"name": "Case 15",
"value": 8600,
},
{
"name": "Case 16",
"value": 4280,
},
{
"name": "Case 17",
"value": 9000,
},
{
"name": "Case 18",
"value": 5000,
},
{
"name": "Case 19",
"value": 4300,
},
{
"name": "Case 20",
"value": 2600,
},
{
"name": "Case 21",
"value": 6700,
},{
"name": "Case 22",
"value": 12000,
},
{
"name": "Case 23",
"value": 8290,
},
{
"name": "Case 24",
"value": 8000,
},
{
"name": "Case 25",
"value": 7600,
},
{
"name": "Case 26",
"value": 1600,
},
{
"name": "Case 27",
"value": 5500,
},
{
"name": "Case 28",
"value": 4400,
},{
"name": "Case 29",
"value": 8900,
},
{
"name": "Case 30",
"value": 6790,
},
{
"name": "Case 31",
"value": 11000,
},
{
"name": "Case 32",
"value": 5000,
},
{
"name": "Case 33",
"value": 6600,
},
{
"name": "Case 34",
"value": 7700,
},
{
"name": "Case 35",
"value": 3000,
}];
//sort bars based on value
data = data.sort(function (a, b) {
return d3.descending(a.name, b.name);
})
//set up SVG using margin conventions - we'll need plenty of room on the left for labels
var margin = {
top: 15,
right: 100,
bottom: 15,
left: 100
};
var width = window.innerWidth - margin.left - margin.right,
height = window.innerHeight- margin.top - margin.bottom;
var svg = d3.select("#graphic").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 + ")");
var x = d3.scale.linear()
.range([0, width])
.domain([0, d3.max(data, function (d) {
return d.value;
})]);
var y = d3.scale.ordinal()
.rangeRoundBands([height, 0], .1)
.domain(data.map(function (d) {
return d.name;
}));
//make y axis to show bar names
var yAxis = d3.svg.axis()
.scale(y)
//no tick marks
.tickSize(0)
.orient("left");
var gy = svg.append("g")
.attr("class", "y axis")
.call(yAxis)
var bars = svg.selectAll(".bar")
.data(data)
.enter()
.append("g")
//append rects
bars.append("rect")
.attr("class", "bar")
.attr("y", function (d) {
return y(d.name);
})
.attr("height", y.rangeBand())
.attr("x", 0)
.attr("width", function (d) {
return x(d.value);
})
//add a value label to the right of each bar
bars.append("text")
.attr("class", "label")
//y position of the label is halfway down the bar
.attr("y", function (d) {
return y(d.name) + y.rangeBand() / 2 + 4;
})
//x position is 3 pixels to the right of the bar
.attr("x", function (d) {
return x(d.value);
})
.style('fill', 'darkGray')
.text(function (d) {
return d.value;
});
// add markers
bars.append("rect")
.attr("class", "highlight")
.attr("y", function (d) {
return y(d.name);
})
.attr("height", y.rangeBand())
.attr("x", function (d) {
return x(d.xValue);
})
.attr("width", function (d) {
return x(d.xValue + d.slength);
})
</script>
</body>
</html>还有一个小提琴链接：http : //jsfiddle.net/wc4q3r1y/
希望这可以帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在D3的条形图中的条形图中添加文本图例？
- 2
D3：如何在分组条形图中的每个条形上方添加标签
- 3
如何在d3条形图中的单个条形中添加值
- 4
如何使用D3将堆积条形图中的条形设置为最小高度？
- 5
如何在 D3 条形图中添加分隔符
- 6
在条形图中找到条形的均值-d3
- 7
如何在 Ember 应用程序的 D3 垂直条形图中添加更新标签
- 8
D3条形图需要在特定条形图中添加箭头和文本
- 9
D3在水平堆叠的条形图中添加文本标签
- 10
D3条形图中的链接
- 11
如何减少d3条形图中的Y轴比例值？
- 12
如何在D3条形图中限制最大宽度
- 13
使用d3在堆叠条形图中每个矩形的尖端上的堆叠条的总高度
- 14
使用D3.js将误差线添加到分组条形图中
- 15
如何在d3条形图上添加注释数组？
- 16
否则响应的已分组d3条形图中的无响应条形
- 17
否则响应的已分组d3条形图中的无响应条形
- 18
如何在分组的条形图中标记每个条形？
- 19
如何使用d3.js在条形图中设置颜色渐变？
- 20
使用d3 js的水平条形图
- 21
d3 在条形图上使用缩放和画笔
- 22
如何使用DC，D3和Crossfilter过滤数据以生成条形图？
- 23
如何在nvd3分组多条形图的分组条形图中的条形之间添加空格？
- 24
如何在Vega Lite分组条形图中添加文本标记
- 25
D3 条形图镜像
- 26
如何使用ggplot2在条形图中的条形上添加频率计数标签？
- 27
d3 +条形图中的定位数据标签+顶部，中间，底部，中心
- 28
d3仅在带有条形图中数据的刻度线上显示标签
- 29
自定义刻度值在d3条形图中消失
我来说两句