Question

我是D3.js的新手，我在从csv文件中读取数据时遇到了问题。目前我的数据集有3列：1）日期，2）产品名称，3）数量。我想显示每月销售的数量。截至目前，我使用数据透视表来按月过滤数据，保存为新的csv文件，然后将其解析为d3.csv方法以显示在条形图中。

理想情况下，我想使用d3.js从原始数据集中读取，以显示按月销售的数量的条形图。此外，我希望能够过滤我的条形图以显示产品销售的数量

e.g。如果我通过下拉框选择产品A，条形图将相应变换以显示1月，2月的产品A的销售数量....一直到12月。

任何人都可以帮我吗？或者链接我的示例/教程来实现这一目标。

Answer 1

我真的不明白你想要什么，但你可以在d3.js网站（http://d3js.org/）找到很多例子和文档。

编辑：

你可以做这样的事情（我只是对数据进行硬编码，但很容易适应）：

HTML：

<svg id="visualisation" width="1000" height="500"></svg>

JS：

var dataC = [{
  'x': 'p1',
  'y': 5
}, {
  'x': 'p2',
  'y': 20
}, {
  'x': 'p3',
  'y': 10
}, {
  'x': 'p4',
  'y': 40
}, {
  'x': 'p5',
  'y': 5
}, {
  'x': 'p6',
  'y': 60
}];
InitChart(dataC);
function InitChart(barData, child) {
  var vis = d3.select('#visualisation'),
  WIDTH = 500,
  HEIGHT = 500,
  MARGINS = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 50
  },
  xRange = d3.scale.ordinal().rangeRoundBands([MARGINS.left, WIDTH - MARGINS.right], 0.1).domain(barData.map(function (d) {
    return d.x;
  })),
  yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0,
    d3.max(barData, function (d) {
      return d.y;
    })
  ]),
  xAxis = d3.svg.axis()
    .scale(xRange)
    .tickSize(5)
    .tickSubdivide(true),
  yAxis = d3.svg.axis()
    .scale(yRange)
    .tickSize(5)
    .orient("left")
    .tickSubdivide(true);
vis.append('svg:g')
  .attr('class', 'x axis')
  .attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')')
  .call(xAxis);
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.x);
  })
  .attr('y', function (d) {
    return yRange(d.y);
  })
  .attr('width', xRange.rangeBand())
  .attr('height', function (d) {
    return ((HEIGHT - MARGINS.bottom) - yRange(d.y));
  })
  .attr('fill', 'grey')
  .on('mouseover',function(d){
    d3.select(this)
      .attr('fill','blue');
  })
  .on('mouseout',function(d){
    d3.select(this)
      .attr('fill','grey');
  })
  .on('click',function(d){
      d3.selectAll("svg > *").remove();
    child ? InitChart(dataC) : InitChart([d], true);
  });
}

的CSS：

 .axis path, .axis line
    {
        fill: none;
        stroke: #777;
        shape-rendering: crispEdges;
    }

    .axis text
    {
        font-family: 'Arial';
        font-size: 13px;
    }
    .tick
    {
        stroke-dasharray: 1, 2;
    }
    .bar
    {
        fill: FireBrick;
    }

此处为jsfiddle

按产品在D3

1 个答案: