D3 如何以文本或使用图例显示我的数据集
Posted
技术标签:
【中文标题】D3 如何以文本或使用图例显示我的数据集【英文标题】：D3 how to show my dataset in text or using legend 【发布时间】：2018-05-24 12:54:03 【问题描述】：我想在我的图表上显示一个图例或文本或我的数据。 我可以显示我的图表，但我不知道如何像文本一样显示“lab”和“labno”值。我不知道我应该把我的传奇放在哪里。 我想在我的图表函数中显示它。
我想显示这样的东西
x 是 30 y 为真 z 为真
这是我的代码
var data =
[
algo:"a ", accuracy: 50, lab:"x ", labno: 30 ,
algo:"b", accuracy: 96.29, lab:"y", labno:"True" ,
algo:"c", accuracy: 95, lab:"z", labno: "True"
];
function drawBarcharts(data)
var margin = top:10, right:10, bottom:90, left:50;
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .03)
var yScale = d3.scale.linear().range([height, 0])
var xScale2 = d3.scale.linear();
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var svgContainer = d3.select("#chartID").append("svg")
.attr("width", width+margin.left + margin.right)
.attr("height",height+margin.top + margin.bottom)
.append("g").attr("class", "container")
.attr("transform", "translate("+ margin.left +","+ margin.top +")");
xScale.domain(data.map(function(d) return d.algo; ));
yScale.domain([0, d3.max(data, function(d) return d.accuracy )]);
var xAxis_g = svgContainer.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height) + ")")
.call(xAxis)
.selectAll("text");
var yAxis_g = svgContainer.append("g")
.append("text")
.text("abc");
svgContainer.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) return xScale(d.algo); )
.attr("width", xScale.rangeBand())
.attr("y", function(d) return yScale(d.accuracy); )
.attr("height", function(d) return height - yScale(d.accuracy); )
svgContainer.selectAll(".text")
.data(data)
.enter()
.append("text")
.attr("class","label")
.attr("x", (function(d) return xScale(d.algo) + xScale.rangeBand() / 2 ; ))
.attr("y", function(d) return yScale(d.accuracy) +10; )
.attr("dy", ".75em")
.text(function(d) return d.accuracy; )
【问题讨论】：
【参考方案1】：给你。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
</script>
<style>
body
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
svg
width: 100%;
height: 100%;
position: center;
text
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:12px;
.axis text
font: 10px sans-serif;
.axis path
fill: none;
stroke: #000;
.axis line
fill: none;
stroke: #000;
shape-rendering: crispEdges;
.axis .tick line
stroke-width: 1;
stroke: rgba(0, 0, 0, 0.2);
.axisHorizontal path
fill: none;
.axisHorizontal line
fill: none;
stroke: #000;
shape-rendering: crispEdges;
.axisHorizontal .tick line
stroke-width: 1;
stroke: rgba(0, 0, 0, 0.2);
.bar
fill: steelblue;
fill-opacity: .9;
</style>
</head>
<body>
<div id="chartID"></div>
<script type="text/javascript">
var data =
[
algo:"a ", accuracy: 50, lab:"x ", labno: 30 ,
algo:"b", accuracy: 96.29, lab:"y", labno:"True" ,
algo:"c", accuracy: 95, lab:"z", labno: "True"
];
var drawBarcharts = function()
var margin = top:10, right:10, bottom:90, left:50;
var width = 450 - margin.left - margin.right;
var height = 300 - margin.top - margin.bottom;
var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .03)
var yScale = d3.scale.linear().range([height, 0])
var xScale2 = d3.scale.linear();
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var svgContainer = d3.select("#chartID").append("svg")
.attr("width", width+margin.left + margin.right)
.attr("height",height+margin.top + margin.bottom)
.append("g").attr("class", "container")
.attr("transform", "translate("+ margin.left +","+ margin.top +")");
xScale.domain(data.map(function(d) return d.algo; ));
yScale.domain([0, d3.max(data, function(d) return d.accuracy )]);
var xAxis_g = svgContainer.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height) + ")")
.call(xAxis)
.selectAll("text");
//var yAxis_g = svgContainer.append("g")
//.append("text")
//.text("abc");
svgContainer.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) return xScale(d.algo); )
.attr("width", xScale.rangeBand())
.attr("y", function(d) return yScale(d.accuracy); )
.attr("height", function(d) return height - yScale(d.accuracy); )
svgContainer.selectAll(".text")
.data(data)
.enter()
.append("text")
.attr("class","label")
.attr("x", (function(d) return xScale(d.algo) + xScale.rangeBand() / 2 ; ))
.attr("y", function(d) return yScale(d.accuracy) +10; )
.attr("dy", ".75em")
.text(function(d) return d.labno; )
var legend = svgContainer.selectAll(".legend")
.data(data)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) return "translate(0," + i * 20 + ")"; );
legend.append("text")
.attr("x", 10)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "start")
.text(function(d) return d.lab + ' is ' + d.labno; );
(data);
</script>
</body>
</html>【讨论】：
我能知道为什么投反对票吗？我问错了吗？我假设 pepo 想要显示一个图例，其中包含他未在图表中使用的内容。以上是关于D3 如何以文本或使用图例显示我的数据集的主要内容，如果未能解决你的问题，请参考以下文章