如何通过变量分配动态x轴值和y轴？

Question

Each time i am sending different data to d3js chart. so each time user will select x axis and y axis in chart.

I have created a sample example in which my chart is not working how to us variable in it.

var barData=  [ { "Name":"Liu, Laurin", "Age":22, "Gender":"Female"},
{ "Name":"Mourani, Maria", "Age":43, "Gender":"Female"},
{ "Name":"Sellah, Djaouida", "Gender":"Female"},
{ "Name":"St-Denis, Lise", "Age":72, "Gender":"Female"},
{ "Name":"Fry, Hedy", "Age":71, "Gender":"Female"}]
    var xs = "Name";
    var ys = "Age";
     var vis = d3.select('#visualisation'),
        WIDTH = 600,
        HEIGHT = 400,
        MARGINS = {
          top: 20,
          right: 20,
          bottom: 20,
          left: 30
        },
        xRange = d3.scale.ordinal().rangeRoundBands([MARGINS.left, WIDTH - MARGINS.right], 0.5).domain(barData.map(function (d) {
          return d.xs;
        })),


        yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0,
          d3.max(barData, function (d) {
            return d.ys;
          })
        ]),

        xAxis = d3.svg.axis()
          .scale(xRange)
          .tickSize(5)
          .tickSubdivide(true),

        yAxis = d3.svg.axis()
          .scale(yRange)
          .tickSize(5)
          .orient("left")
          .tickSubdivide(true);


    var xd =  vis.append('svg:g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')')
        .call(xAxis);
    xd.selectAll("text")
    .attr("dx", "-1em")
         .attr("dy", "2em")
    .attr({
        transform: function (d) {
            return "rotate(-30, 0, 0)";
        }
    });
      vis.append('svg:g')
        .attr('class', 'y axis')
        .attr('transform', 'translate(' + (MARGINS.left) + ',0)')
        .call(yAxis);

      vis.selectAll('rect')
        .data(barData)
        .enter()
        .append('rect')
        .attr('x', function (d) {
          return xRange(d.xs);
        })
        .attr('y', function (d) {
          return yRange(d.ys);
        })
        .attr('width', xRange.rangeBand())
        .attr('height', function (d) {
          return ((HEIGHT - MARGINS.bottom) - yRange(d.ys));
        })
        .attr('fill', 'steelblue');

}

Answer 1

I have found the solution some how it could be possibly this way

var barData=  [ { "Name":"Liu, Laurin", "Age":22, "Gender":"Female"},
{ "Name":"Mourani, Maria", "Age":43, "Gender":"Female"},
{ "Name":"Sellah, Djaouida", "Gender":"Female"},
{ "Name":"St-Denis, Lise", "Age":72, "Gender":"Female"},
{ "Name":"Fry, Hedy", "Age":71, "Gender":"Female"}]
var xs = "Name";
var ys = "Age";
 var vis = d3.select('#visualisation'),
    WIDTH = 600,
    HEIGHT = 400,
    MARGINS = {
      top: 20,
      right: 20,
      bottom: 20,
      left: 30
    },
    xRange = d3.scale.ordinal().rangeRoundBands([MARGINS.left, WIDTH - MARGINS.right], 0.5).domain(barData.map(function (d) {
      return d[xs];
    })),


    yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0,
      d3.max(barData, function (d) {
        return d[ys];
      })
    ]),

    xAxis = d3.svg.axis()
      .scale(xRange)
      .tickSize(5)
      .tickSubdivide(true),

    yAxis = d3.svg.axis()
      .scale(yRange)
      .tickSize(5)
      .orient("left")
      .tickSubdivide(true);


var xd =  vis.append('svg:g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')')
    .call(xAxis);
xd.selectAll("text")
.attr("dx", "-1em")
     .attr("dy", "2em")
.attr({
    transform: function (d) {
        return "rotate(-30, 0, 0)";
    }
});
  vis.append('svg:g')
    .attr('class', 'y axis')
    .attr('transform', 'translate(' + (MARGINS.left) + ',0)')
    .call(yAxis);

  vis.selectAll('rect')
    .data(barData)
    .enter()
    .append('rect')
    .attr('x', function (d) {
      return xRange(d[xs]);
    })
    .attr('y', function (d) {
      return yRange(d[ys]);
    })
    .attr('width', xRange.rangeBand())
    .attr('height', function (d) {
      return ((HEIGHT - MARGINS.bottom) - yRange(d[ys]));
    })
    .attr('fill', 'steelblue');

}