D3js 从数组而不是文件中获取数据
Posted
技术标签:
【中文标题】D3js 从数组而不是文件中获取数据【英文标题】：D3js take data from an array instead of a file 【发布时间】：2014-03-05 13:07:43 【问题描述】：我找到了这个出色的 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>
非常感谢
【问题讨论】：
JSON 文件怎么样？它必须是一个数组吗？如果是这样，只需将频率存储在大小为 26 的数组中，并将每个字母存储在另一个数组中。然后，在制作每个条时只需交叉检查数组（以便您可以标记）。 非常感谢@Luxelin 的评论。我想将数据从 C# 传递到 javascript，因此我需要成为一个数组 ... 大多数 d3 方法的预期格式是 Javascript 数组，因此如果您使用可以将数据从 C# 传递到 javascript 的方法，那应该可以。否则，如果您可以将数据写入文件或字符串作为 JSON 数组或分隔表，则可以对其进行解析。但这实际上取决于您计划如何从 C# 程序（我假设在服务器上）和运行 Javascript 的浏览器中获取数据。向我们提供有关您的数据格式的更多信息，我们可以告诉您如何解析它... 【参考方案1】：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 文件的方式非常相似。这意味着我们不必更改回调函数中的代码，因为它已经需要一个具有这种格式数据的变量。您可以根据需要更改此设置，但请记住更改回调代码使用“data”变量的方式。
现在我们可以删除与 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数组数据集设计分组条形图时，我们需要做哪些改变？【参考方案2】：整个d3.tsv() 东西（或d3.json() 或其他）是可选的。因此，只需将其与回调剥离并直接使用您的数据：
var fruits = ['apple', 'mango', 'banana', 'orange'];
d3.select('ul')
.selectAll('li')
.data(fruits)
.enter()
.append('li')
.text(function(d) return d; );
PS：这就是为什么你找不到d3.data() 函数或其他什么的原因，我搜索了一段时间；-)
【讨论】：
以上是关于D3js 从数组而不是文件中获取数据的主要内容，如果未能解决你的问题，请参考以下文章
当我们使用 Glue 将数据从 DocumentDb 转储到 Redshift 时，从 Redshift 获取字符串而不是数组
如何从 InputStream 而不是 File 中获取 Exif 数据？
将数据从 Athena 或 Redshift 获取到 Sage maker 或 AWS Forecast 而不是平面文件