Question

以下是我已成功绘制为json图的x轴和y轴的示例d3js数据。

    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 demo

的链接

Answer 1

更新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);
            })]),

见DEMO

将json数据绘制到d3js图形轴

1 个答案: