jsonデータをd3jsグラフの軸にプロットする

debugcn 投稿 Dev

iJade

jsonこれは、d3jsグラフのx軸とy軸として正常にプロットしたサンプルデータです。

    var data = [
    {
      "count": "202",
      "year": "1590"
    },
    {
      "count": "215",
      "year": "1592"
    }, 
    {
      "count": "179",
      "year": "1593"
    }
];

今私の問題は、以下のjsonをプロットする方法です：

    var data =  {
  "count": [202,215,179],
  "year":[1590,1592,1593]
};

これは、以前のjsonデータの軸をプロットした方法のコードです。

    /******Sample Json data i'm trying to plot********/
var data1 =  {
  "count": [202,215,179],
  "year":[1590,1592,1593]
};

var data = [
    {
      "count": "202",
      "year": "1590"
    },
    {
      "count": "215",
      "year": "1592"
    }, 
    {
      "count": "179",
      "year": "1593"
    }
];

/*************************************************/


/*******************Real Stuff starts here*******************/
var vis = d3.select("#visualisation"),
  WIDTH = 600,
  HEIGHT = 400,
  MARGINS = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 50
  },
  xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(data, function (d) {
      return (parseInt(d.year, 10) - 5);
    }),
    d3.max(data, function (d) {
      return parseInt(d.year, 10);
    })]),
  yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(data, function (d) {
      return (parseInt(d.count, 10) - 5);
    }),
    d3.max(data, function (d) {
      return parseInt(d.count, 10);
    })]),


  xAxis = d3.svg.axis() // generate an axis
       .scale(xRange) // set the range of the axis
       .tickSize(5) // height of the ticks
       .tickSubdivide(true), // display ticks between text labels
  yAxis = d3.svg.axis() // generate an axis
       .scale(yRange) // set the range of the axis
       .tickSize(5) // width of the ticks
       .orient("left") // have the text labels on the left hand side
       .tickSubdivide(true); // display ticks between text labels 

function init() {
  vis.append("svg:g") // add a container for the axis
  .attr("class", "x axis") // add some classes so we can style it
  .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") // move it into position
  .call(xAxis); // finally, add the axis to the visualisation

  vis.append("svg:g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + (MARGINS.left) + ",0)")
    .call(yAxis);
}
init();

そしてここにjsfiddleデモへのリンクがあります

ニティーシュクマール

xRangeとyRangeを更新します

   xRange = d3.scale.linear()
               .range([MARGINS.left, WIDTH - MARGINS.right])
               .domain([d3.min(data.year, function (d) {
                        return (parseInt(d, 10) - 5);
                }),

           d3.max(data.year, function (d) {
               return parseInt(d, 10);
          })]),

   yRange = d3.scale.linear()
              .range([HEIGHT - MARGINS.top, MARGINS.bottom])
              .domain([d3.min(data.count, function (d) {
                       return (parseInt(d, 10) - 5);
              }),

            d3.max(data.count, function (d) {
               return parseInt(d, 10);
            })]),

SEE DEMO

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]