Question

我有一个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来标识返回数据中的标签，但是我需要它来动态命名轴键/值我不知道如何实现这一点。 / p>

此外，我拥有的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;
                    }

Answer 1

快速＆amp;查找第一个和第二个键名称的脏技巧：只需将"左右的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);

D3动态JSON标签

1 个答案: