Question

我正在制作一个带有实时加密货币值的圆环图，我通过API中的ajax获取。我可以设法将从多个调用中得到的值合并到一个json中，然后用这些调用D3甜甜圈，但是我还要找出一种方法来为每个货币添加一个字段到json中，将拥有用户目前拥有的硬币数量。 重点是能够向用户显示他有多少钱币。

如果用户拥有的硬币金额将存储在另一个json中，那将是最好的，但我真的很绝望。

我的困难在于D3本身会迭代json并绘制图表，这使得很难将json中的特定值与某些其他数字相乘（将圆半径乘以2的方式使圆圈全部更大）

我将附上我的源代码。希望一切都很简单。您可以在此处找到图表：http://codepen.io/kvyb/pen/EZGyJL?editors=0110

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;
        }

如何显示用户悬停时某些硬币的数量？

另一种方法是，不是向json添加值，而是从＆＃34; all_data＆＃34;中获取所有价格。变量，但如果我尝试迭代json，我得到＆＃34; undefined＆＃34;回。我想可能只用＃34; all_data＆＃34;的价格创建另一个json。并用它来查找投资组合编号。任何帮助将不胜感激。

将变量添加到JSON对象 - D3.js实时圆环图

0 个答案: