Javascript 向JSON对象添加变量-D3.js live圆环图
我正在制作一个甜甜圈图表,其中包含通过ajax从API获取的实时加密货币值。我可以设法将多次调用得到的值组合成一个json,然后用这些值绘制一个D3甜甜圈,但是我还必须找到一种方法,在json中为每种货币添加一个字段,该字段将包含用户当前拥有的硬币数量重点是能够向用户显示他有多少硬币的价值。 最好是将用户拥有的硬币数量存储在另一个json中,但我非常希望任何事情都能做到 对我来说,困难在于D3本身迭代json并绘制图表,使得json中的特定值很难与某些其他数字相乘(就像将圆半径乘以2使圆变得更大一样) 因此,我将附上我的源代码。希望一切都很简单。您可以在此处找到图表:Javascript 向JSON对象添加变量-D3.js live圆环图,javascript,jquery,json,d3.js,Javascript,Jquery,Json,D3.js,我正在制作一个甜甜圈图表,其中包含通过ajax从API获取的实时加密货币值。我可以设法将多次调用得到的值组合成一个json,然后用这些值绘制一个D3甜甜圈,但是我还必须找到一种方法,在json中为每种货币添加一个字段,该字段将包含用户当前拥有的硬币数量重点是能够向用户显示他有多少硬币的价值。 最好是将用户拥有的硬币数量存储在另一个json中,但我非常希望任何事情都能做到 对我来说,困难在于D3本身迭代json并绘制图表,使得json中的特定值很难与某些其他数字相乘(就像将圆半径乘以2使圆变得更大
var a=[”https://api.cryptonator.com/api/ticker/btc-usd", "https://api.cryptonator.com/api/ticker/ltc-usd", "https://api.cryptonator.com/api/ticker/eth-usd", "https://api.cryptonator.com/api/ticker/etc-usd", "https://api.cryptonator.com/api/ticker/xmr-usd", "https://api.cryptonator.com/api/ticker/icn-usd", "https://api.cryptonator.com/api/ticker/dash-usd", "https://api.cryptonator.com/api/ticker/MAID-usd", "https://api.cryptonator.com/api/ticker/omni-usd", "https://api.cryptonator.com/api/ticker/rep-usd"];
函数fetch(){
所有_数据=[“{\”楼层\:[”];
对于(索引=0;索引”+d.data.Price+”
卷:+d.data.Volume)
.style(“左”,“d3.event.pageX)+“px”)
.style(“top”,(d3.event.pageY-28)+“px”);
})
.on(“mouseout”),函数(d){
过渡部()
.持续时间(0)
.样式(“不透明度”,0);
})
g、 附加(“路径”)
.attr(“d”,弧)
.样式(“填充”,功能(d){
返回颜色(d.数据.价格);
});
g、 附加(“文本”)
.attr(“转换”,函数(d){
返回“平移(“+弧形心(d)+”);
})
.attr(“dy”、“0em”)
.attr(“dx”、“0em”)
.html(函数(d){
返回d.数据库;
});
功能类型(d){
d、 价格=+d.价格;
返回d;
}
您将如何显示用户悬停时的特定硬币数量
另一种方法,不是向json添加值,而是从“all_data”变量中获取所有价格,但是如果我尝试迭代json,则返回“undefined”。我考虑创建另一个json,只包含“all_data”中的价格,并使用它来查找投资组合编号。任何帮助都将不胜感激
var a = ["https://api.cryptonator.com/api/ticker/btc-usd", "https://api.cryptonator.com/api/ticker/ltc-usd", "https://api.cryptonator.com/api/ticker/eth-usd", "https://api.cryptonator.com/api/ticker/etc-usd", "https://api.cryptonator.com/api/ticker/xmr-usd", "https://api.cryptonator.com/api/ticker/icn-usd", "https://api.cryptonator.com/api/ticker/dash-usd", "https://api.cryptonator.com/api/ticker/MAID-usd", "https://api.cryptonator.com/api/ticker/omni-usd", "https://api.cryptonator.com/api/ticker/rep-usd"];
function fetch() {
all_data = ["{\"floor\": ["];
for (index = 0; index < a.length; ++index) {
$.ajax({
url: a[index],
dataType: "json",
async: false,
error: function(data) {
console.log("--");
},
success: function(data) {
all_data += JSON.stringify(data["ticker"]) + ',';
}
})
}
};
fetch()
all_data += "]}";
var pos = all_data.lastIndexOf(',');
all_data = all_data.substring(0, pos) + "" + all_data.substring(pos + 1);
console.log(all_data)
// CHART
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var width = 960,
height = 500,
radius = Math.min(width, height) / 2;
var color = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var arc = d3.arc()
.outerRadius(radius - 10)
.innerRadius(radius - 150);
var pie = d3.pie()
.sort(null)
.value(function(d) {
return +d.price + 50;
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
data = JSON.parse(all_data);
console.log(data);
var g = svg.selectAll(".arc")
.data(pie(data.floor))
.enter().append("g")
.attr("class", "arc")
.on("mouseover", function(d) {
div.transition()
.duration(0)
.style("opacity", .9);
div .html("Price: <br>" + d.data.price + "<br/>Volume: " + d.data.volume)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(0)
.style("opacity", 0);
})
g.append("path")
.attr("d", arc)
.style("fill", function(d) {
return color(d.data.price);
});
g.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("dy", "0em")
.attr("dx", "0em")
.html(function(d) {
return d.data.base;
});
function type(d) {
d.price = +d.price;
return d;
}