D3 动态 JSON 标记
D3 dynamic JSON labelling
我有一个AJAX调用,它把我带回了JSON格式的数据。
[{"KEY":"IA","VALUE":"8"},{"KEY":"GE","VALUE":"1"}]
但是,此数据的标签可能会根据某些用户交互而更改(从下拉列表中选择可能会调用对其他一些数据的搜索),从而导致:
[{"NAME":"STEVE","AGE":"54"},{"NAME":"PETE","AGE":"22"}]
所以我需要一些方法来获取第一个标签和数据并将其推送到 X 轴,如下所示:
|
|
|
|
|_____________
Steve Pete
Name
然后将第二个标签和数据粘贴在 Y 轴上。
所以我看到的大多数代码示例都使用某种形式的 d3.name 来识别返回数据中的标签,但由于我需要它来动态命名轴键/值,我不确定如何实现这一点。
此外,我拥有的 JSON 数据存储在一个名为 jdata 的变量中,所以我不会使用d3.json 方法。
我工作的例子是:http://codepen.io/mrev/pen/waKvbw
.JS:
var margin ={top:20, right:30, bottom:30, left:40},
width=960-margin.left - margin.right,
height=500-margin.top-margin.bottom;
// scale to ordinal because x axis is not numerical
var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
//scale to numerical value by height
var y = d3.scale.linear().range([height, 0]);
var chart = d3.select("#chart")
.append("svg") //append svg element inside #chart
.attr("width", width+(2*margin.left)+margin.right) //set width
.attr("height", height+margin.top+margin.bottom); //set height
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom"); //orient bottom because x-axis will appear below the bars
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
d3.json("http://codepen.io/superpikar/pen/kcJDf.js", function(error, data){
x.domain(data.map(function(d){ return d.letter}));
y.domain([0, d3.max(data, function(d){return d.frequency})]);
var bar = chart.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i){
return "translate("+x(d.letter)+", 0)";
});
bar.append("rect")
.attr("y", function(d) {
return y(d.frequency);
})
.attr("x", function(d,i){
return x.rangeBand()+(margin.left/2);
})
.attr("height", function(d) {
return height - y(d.frequency);
})
.attr("width", x.rangeBand()); //set width base on range on ordinal data
bar.append("text")
.attr("x", x.rangeBand()+margin.left )
.attr("y", function(d) { return y(d.frequency) -10; })
.attr("dy", ".75em")
.text(function(d) { return d.frequency; });
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate("+margin.left+","+ height+")")
.call(xAxis);
chart.append("g")
.attr("class", "y axis")
.attr("transform", "translate("+margin.left+",0)")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
});
function type(d) {
d.letter = +d.letter; // coerce to number
return d;
}
.HTML:
<div id="chart"></div>
编辑的代码
var jsplit = jdata.split('"');
var keyX = jsplit[1];
var keyY = "";
var data = JSON.parse(jdata);
data[0].keys().forEach(function(k) {
if (k!=keyX) keyY=k;
});
var margin ={top:20, right:30, bottom:30, left:40},
width=960-margin.left - margin.right,
height=500-margin.top-margin.bottom;
// scale to ordinal because x axis is not numerical
var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
//scale to numerical value by height
var y = d3.scale.linear().range([height, 0]);
var chart = d3.select("#chart")
.append("svg") //append svg element inside #chart
.attr("width", width+(2*margin.left)+margin.right) //set width
.attr("height", height+margin.top+margin.bottom); //set height
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom"); //orient bottom because x-axis will appear below the bars
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
x.domain(data.map(function(d){ return d[keyX]}));
y.domain([0, d3.max(data, function(d){return d[keyY]})]);
var bar = chart.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i){
return "translate("+x(d[keyX])+", 0)";
});
bar.append("rect")
.attr("y", function(d) {
return y(d[keyY]);
})
.attr("x", function(d,i){
return x.rangeBand()+(margin.left/2);
})
.attr("height", function(d) {
return height - y(d[keyY]);
})
.attr("width", x.rangeBand()); //set width base on range on ordinal data
bar.append("text")
.attr("x", x.rangeBand()+margin.left )
.attr("y", function(d) { return y(d[keyY]) -10; })
.attr("dy", ".75em")
.text(function(d) { return d[keyY]; });
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate("+margin.left+","+ height+")")
.call(xAxis);
chart.append("g")
.attr("class", "y axis")
.attr("transform", "translate("+margin.left+",0)")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
function type(d) {
d[keyX] = +d[keyX]; // coerce to number
return d;
}
查找第一个和第二个键名称的快速而肮脏的技巧:只需将 JSON 文本数据拆分为"
:
var jsplit = jdata.split('"');
var keyX = jsplit[1];
var keyY = jsplit[5];
这是假设您的数据格式没有改变,并且"
字符没有出现在值中
编辑:考虑评论:
var jsplit = jdata.split('"');
var keyX = jsplit[1];
var keyY = "";
var data = JSON.parse(jdata);
for (k in data[0]) {
if (k!=keyX) keyY=k;
}
请注意,所有这些代码以及图形构建部分的其余部分都应出现在 ajax 方法的回调函数中。您需要分别使用 d[keyX]
和 d[keyY]
,而不是示例中的 d.letter
和 d.frequency
。
对于标签,.text("Frequency")
应该是.text(keyY)
的,你需要添加一个x标签,也许是(未经测试的):
.call(xAxis) //add the following lines:
.append("text")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text(keyX);
相关文章:
- 谷歌地图JS API+JSON-多个标记没有显示
- 使用JSON在谷歌地图上显示标记
- 使用javascript或angularjs特定过滤器搜索字符串中第一个img标记的json值
- 如何在json.erb模板中呈现脚本标记
- 读取角度表达式json数据中的br或pre或html标记
- 使用来自URL的JSON数据来显示谷歌地图标记-如何
- 当字符串包含 HTML 标记时,JSON 解析失败
- 为什么没有标记但数据可见(使用 JSON)
- 车把.js在数据标记中嵌入文本 json 对象
- 使用 JSON.parse 将字符串(变量)转换为对象,错误意外标记
- 传递JSON后未创建标记
- 获取JSON标记(JAVASCRIPT)中的所有JSON实例
- 在HTML中插入JSON中的select标记选项
- 有没有任何方法可以将json对象存储在HTML标记的默认/自定义属性中,比如<tr>
- 谷歌地图标记不显示ajax json数据
- 使用json将infoWindow添加到映射标记中
- 未捕获的语法错误:意外的标记-JSON字符编码
- 如何用HTML标记JSON.parse字符串
- 谷歌地图Ajax多个标记Json
- 标记json的路由