我找到了这个优秀的 d3js 图表 here .但是,就我而言,我希望此图表从数组而不是 tsv 文件中获取值。我想让它从表 [] 中获取值。我该怎么做?因为它为此使用了一个函数,我不知道我应该把我的数组放在哪里。
Using d3-tip to add tooltips to a d3 bar chart.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: orange;
}
.bar:hover {
fill: orangered ;
}
.x.axis path {
display: none;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>
var margin = {top: 40, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var formatPercent = d3.format(".0%");
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(formatPercent);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
})
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 + ")");
svg.call(tip);
d3.tsv("data.tsv", type, function(error, data) {
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
});
function type(d) {
d.frequency = +d.frequency;
return d;
}
</script>
非常感谢
最佳答案
D3 gallery有很多很好的例子,但是很多例子都是从 tab-separated values file 加载数据的.这是在简短示例中分离数据和可视化的好方法,但如果您是 D3 和 JavaScript 的新手,它可能会有点困惑,因为它需要一些关于 d3.tsv() 和回调函数的基本知识才能理解什么是继续。
免责声明:以下部分将提供一些非常简单的解释。
d3.tsv() 在做什么?
d3.tsv() 主要负责从 data.tsv 加载数据,将其解析为名为 data 的变量,并将该变量发送到 callback function。 .
d3.tsv("data.tsv", type, function(error, data) { <- This is the callback function!
// This code is executed when the data.tsv file is loaded.
});
一旦加载数据,它就会作为数据参数发送给函数。然后执行回调函数中的代码。由于除了作为 d3.tsv() 函数的参数外,我们不需要回调函数,所以我们直接将其作为 anonymous function。 ,而不是像往常一样给它起个名字。
这种对回调函数和匿名函数的使用在 JavaScript 中非常典型,非常值得一读。 Understand JavaScript Callback Functions and Use Them和 Understanding JavaScript Callbacks应该让你开始。
让我们看看如何使用这些信息来重写我们的代码。
如何重写示例以使用局部变量中的数据?
首先我们必须创建包含我们数据的变量。我们将其称为“数据”,与我们的回调函数中的相同,并为其提供示例中的值。
var data = [
{letter: "A", frequency: .08167},
{letter: "B", frequency: .01492},
{letter: "C", frequency: .02780},
{letter: "D", frequency: .04253},
{letter: "E", frequency: .12702},
{letter: "F", frequency: .02288},
{letter: "G", frequency: .02022},
{letter: "H", frequency: .06094},
{letter: "I", frequency: .06973},
{letter: "J", frequency: .00153},
{letter: "K", frequency: .00747},
{letter: "L", frequency: .04025},
{letter: "M", frequency: .02517},
{letter: "N", frequency: .06749},
{letter: "O", frequency: .07507},
{letter: "P", frequency: .01929},
{letter: "Q", frequency: .00098},
{letter: "R", frequency: .05987},
{letter: "S", frequency: .06333},
{letter: "T", frequency: .09056},
{letter: "U", frequency: .02758},
{letter: "V", frequency: .01037},
{letter: "W", frequency: .02465},
{letter: "X", frequency: .00150},
{letter: "Y", frequency: .01971},
{letter: "Z", frequency: .00074}
];
将此变量放在调用 d3.tsv 之前的某处,因为回调函数中的代码依赖于此变量。
我选择将数据表示为具有字母和频率属性的对象列表。这是一种简单的方法,因为它与 d3.tsv() 解析 .tsv 文件的方式非常相似。这意味着我们不必更改回调函数中的代码,因为它已经需要一个包含这种格式数据的变量。您可以根据需要更改此设置,但请记住更改回调代码使用“数据”变量的方式。
现在我们可以删除与 d3.tsv 调用相关的代码,只留下回调函数中包含的代码。所以这段代码:
d3.tsv("data.tsv", type, function(error, data) {
x.domain(data.map(function(d) { return d.letter; }));
// code omitted.
.on('mouseout', tip.hide)
});
变成这样的代码:
x.domain(data.map(function(d) { return d.letter; }));
// code omitted.
.on('mouseout', tip.hide)
现在这个例子应该可以正常工作了。您也可以尝试使用此策略来重写 D3 库中的其他示例。
最后,我包含了新 index.html 文件的代码。可以在 JSFiddle 找到一个工作示例。 .
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: orange;
}
.bar:hover {
fill: orangered ;
}
.x.axis path {
display: none;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>
var margin = {top: 40, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var formatPercent = d3.format(".0%");
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(formatPercent);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
})
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 + ")");
svg.call(tip);
// The new data variable.
var data = [
{letter: "A", frequency: .08167},
{letter: "B", frequency: .01492},
{letter: "C", frequency: .02780},
{letter: "D", frequency: .04253},
{letter: "E", frequency: .12702},
{letter: "F", frequency: .02288},
{letter: "G", frequency: .02022},
{letter: "H", frequency: .06094},
{letter: "I", frequency: .06973},
{letter: "J", frequency: .00153},
{letter: "K", frequency: .00747},
{letter: "L", frequency: .04025},
{letter: "M", frequency: .02517},
{letter: "N", frequency: .06749},
{letter: "O", frequency: .07507},
{letter: "P", frequency: .01929},
{letter: "Q", frequency: .00098},
{letter: "R", frequency: .05987},
{letter: "S", frequency: .06333},
{letter: "T", frequency: .09056},
{letter: "U", frequency: .02758},
{letter: "V", frequency: .01037},
{letter: "W", frequency: .02465},
{letter: "X", frequency: .00150},
{letter: "Y", frequency: .01971},
{letter: "Z", frequency: .00074}
];
// The following code was contained in the callback function.
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
function type(d) {
d.frequency = +d.frequency;
return d;
}
</script>
关于javascript - D3js 从数组而不是文件中获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21639305/