我正在为我的项目使用d3plus.js,我使用的代码如下所示 链接到演示here
<!doctype html>
<meta charset="utf-8">
<script src="http://www.d3plus.org/js/d3.js"></script>
<script src="http://www.d3plus.org/js/d3plus.js"></script>
<div id="viz"></div>
<script>
var sample_data = [
{"year": 1991, "name":"alpha", "value": 15},
{"year": 1992, "name":"alpha", "value": 20},
{"year": 1994, "name":"alpha", "value": 30},
{"year": 1995, "name":"alpha", "value": 60},
{"year": 1993, "name":"beta", "value": 40},
{"year": 1994, "name":"beta", "value": 60},
{"year": 1995, "name":"beta", "value": 10},
{"year": 1994, "name":"gamma", "value": 35},
{"year": 1995, "name":"gamma", "value": 40}
]
var visualization = d3plus.viz()
.container("#viz")
.data(sample_data)
.type("tree_map")
.id("name")
.size("value")
.time({"value": "year", "solo": 1994})
.draw()
</script>
在这里,我想用几个月代替年份。喜欢而不是1991,1992等等,我需要Jan,Feb,March等。问题看起来很简单但只是替换了dint工作。有没有办法做到这一点?
这是我试过的
<script>
var sample_data = [
{"month": 'jan', "name":"alpha", "value": 15},
{"month": 'feb', "name":"alpha", "value": 20},
{"month": 'march', "name":"alpha", "value": 30},
{"month": 'april', "name":"alpha", "value": 60},
{"month": 'may', "name":"beta", "value": 40},
{"month": 'march', "name":"beta", "value": 60},
{"month": 'april', "name":"beta", "value": 10},
{"month": 'march', "name":"gamma", "value": 35},
{"month": 'april', "name":"gamma", "value": 40}
]
var visualization = d3plus.viz()
.container("#viz")
.data(sample_data)
.type("tree_map")
.id("name")
.size("value")
.time({"value": "month", "solo": "jan"})
.draw()
</script>
答案 0 :(得分:0)
找到答案
<script>
var sample_data = [
{"month": "2012/05/21", "name":"alpha", "value": 15},
{"month": "2012/05/21", "name":"alpha", "value": 20},
{"month": "2012/06/21", "name":"alpha", "value": 30},
{"month": "2012/06/21", "name":"gamma", "value": 60},
{"month": "2012/08/21", "name":"gamma", "value": 40}
]
var visualization = d3plus.viz()
.container("#viz")
.data(sample_data)
.type("tree_map")
.id("name")
.size("value")
.time({"value": "month", "solo": "2012/05/21"})
.draw()
</script>