小编d3n*_*oob的帖子
如何在d3.js/JavaScript中将零值添加到时间序列中
这是我之前使用php或(我认为是)不必要的复杂MySQL查询解决的问题,但我突然认为在JavaScript/d3.js中必须有一个更优雅的解决方案.
想象一下,我有一个日期和值的数据集,我想在d3.js中转换成条形图.
date,value
2013-01,53
2013-02,165
2013-03,269
2013-04,344
2013-05,376
2013-06,410
2013-07,421
2013-09,376
2013-10,359
2013-11,392
2013-12,433
2014-01,455
2014-02,478
您会注意到数据中的第8个月(8月)没有条目.假设8月是零值,最终结果是得到的条形图看起来正常,但当然没有第8个月应该是间隙(零).
我考虑过尝试添加一个填充了零的完整数据集,然后对其进行迭代以包含数据中的值,但这似乎过于复杂.我假设有一个优雅的解决方案,我太无知了.
谢谢你的帮助.
编辑#1:回应explunit的回答:
理想情况下,解决方案应该是对数据系列的操纵,而不是仅适用于条形图.这意味着在这个jsfiddle的线图的等价物将在它的中间突然下降.
编辑#2:经过一段时间的游戏后:
在这里玩了Google网上论坛页面上的建议后,我设法获得了一段代码来完成我想要的工作.它采用时间戳数据,根据时间范围创建一个域,并创建一个单独的数组(在这种情况下).然后我粗略地遍历两个数组,并将适合初始(未完全填充时间值)数组的值添加到具有所有时间值的数组中(并且数据值最初设置为零).
最终结果是一个线图,最初看起来像这样,因为它在2013年7月到9月之间迭代;
随后被渲染为,因为August值将被添加为零;
我会先说出来的.虽然它在这个实例中完成了我想要的工作,但它距离优雅或可扩展还有很长的路要走.如果比我聪明的人能够看到如何减少攻击性,我将不胜感激.
推荐指数
解决办法
查看次数
使用d3.js缩放和平移以太平洋为中心的墨卡托地图
抱歉,如果这是一个简单的案例,我对显而易见的事情视而不见,但我试图整理一个页面,显示以太平洋为中心的墨卡托投影中的世界地图(来自TopoJSON文件的数据).即左边的欧洲,右边的美国和中间的澳大利亚.有点像这样......
从这一点开始,我希望能够将地图缩放并平移到我心中的愿望,但是当我向东或向西平移时,我希望地图能够"环绕"并且不会到达世界末日(我希望这样做感).
我目前正在处理的代码在这里(或在下面的Gist(https://gist.github.com/d3noob/4966228)或块(http://bl.ocks.org/d3noob/4966228));
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {font-size:11px;}
path {
stroke: black;
stroke-width: 0.25px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
velocity = .005,
then = Date.now()
height = 475;
var projection = d3.geo.mercator()
.center([0, 0 ])
.scale(1000);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var path = d3.geo.path()
.projection(projection);
var g = svg.append("g");
d3.json("world-110m.json", function(error, topology) {
g.selectAll("path")
.data(topojson.object(topology, topology.objects.countries).geometries)
.enter()
.append("path")
.attr("d", path)
.style("fill","black")
d3.timer(function() { …推荐指数
解决办法
查看次数
如何从内部JSON数组而不是外部资源/文件加载d3.js中可折叠树的数据？
我希望从文件中加载JSON数据数组,以根据此处的Mike Bostock示例生成可折叠树形图.该示例使用格式正确的外部JSON文件,并使用d3.json函数加载它.
我希望能够从文件中加载一个json数组,这是从flay数组生成多级数组的结果(根据这里的示例问题).
一个我已经站了起来bl.ocks.org样本文件/ GitHub上显示的是什么,我想实现,而不采取多层次的JSON数据,并将其加入到可折叠的树形图中的重要组成部分两个部分
简而言之.我在文件中声明了以下数据;
var data = [
{ "name" : "ABC", "parent":"DEF", "relation": "ghi", "depth": 1 },
{ "name" : "DEF", "parent":"null", "relation": "null", "depth": 0 },
{ "name" : "new_name", "parent":"ABC", "relation": "rel", "depth": 2 },
{ "name" : "new_name2", "parent":"ABC", "relation": "foo", "depth": 2 },
{ "name" : "Foo", "parent":"DEF", "relation": "rel", "depth": 2 }
];
然后通过这部分代码运行...
var dataMap = data.reduce(function(map, node) {
map[node.name] = …推荐指数
解决办法
查看次数
寻找更好的方法来改变d3.js v4中轴组件的颜色
我想为简单的d3.js(v4)图更改轴的颜色.下图中的y轴是成品的一个例子;
我怀疑我使用的方法实现这一点有点难看,我相信根据下面的描述应该有一个替代方案,我还不明白.
所述轴部件是需要的各自的样式改变(中风和填充)文本,路径和线路元件的组合.
在这一点上,我发现改变组件颜色的唯一方法是<style>在代码部分单独设置样式...
.axisRed line{
stroke: red;
}
.axisRed path{
stroke: red;
}
.axisRed text{
fill: red;
}
...并在稍后在JavaScript中附加该类时将该类应用于y轴;
svg.append("g")
.attr("class", "axisRed")
.call(d3.axisLeft(y));
有没有办法可以.style("<some style>", "<some value>")在附加y轴而不是在该<style>部分中声明时通过线应用这些样式？
这里有代码示例.
我曾尝试尝试解决各个DOM组件,例如"域"类,但没有成功.我怀疑我不太了解轴组件的层次结构.
推荐指数
解决办法
查看次数
无法引用从头文件中带空格的csv文件导入的d3.js数据
我从一个csv文件导入数据,该文件包含在某些字段中间带空格的标题.
例如,以下列有一个名为"Date Purchased"的列;
Value,Date Purchased,Score
12345,2011-03-23,99
22345,2011-03-24,100
32345,2011-03-25,99
42345,2011-03-26,100
我知道RFC 4180指出这是正常的;
在标题和每个记录中,可能有一个或多个字段,以逗号分隔.每行应在整个文件中包含相同数量的字段.空间被认为是一个领域的一部分,不应该被忽视.
但是当我然后使用d3.csv函数导入数据时,我需要以允许空间的方式引用"Data Purchased"列.下面的脚本将是最基本的解决方案,但JavaScript不允许在变量名称中使用空格(我知道它看起来很明显,但我试图在逻辑上拼写这个)
d3.csv("sample-data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.Date Purchased);
});
console.log(data) 显示正在导入文件时没有问题,"Data Purchased"列中的数据称为"Data Purchased".
我发现,建议中包含一个小数点,下划线或连字符,而不是一个空间(参考d.Date.Purchased,d.Date_Purchased,d.Date-Purchased),但似乎没有任何工作.
我可以编写一个简单的PHP解析器来删除空格,但感觉有一个简单的解决方案,它将在JavaScript/d3中工作,我只是错过它.
推荐指数
解决办法
查看次数