Javascript D3中按产品按月过滤数量
我是D3.js新手,在从csv文件读取数据时遇到问题。目前我的数据集有3列:1)日期,2)产品名称,3)数量。我想显示我每月的销售量。现在,我使用数据透视表按月份过滤数据,另存为新的csv文件,然后将其解析为d3.csv方法以显示在条形图中 理想情况下,我希望使用d3.js从原始数据集中读取数据,以显示我每月的销售量条形图。此外,我希望能够过滤我的条形图,以显示按产品销售的数量 e、 g.如果我通过下拉框选择产品A,条形图将相应地变换,以显示1月、2月A产品的销售数量。。。。一直到十二月Javascript D3中按产品按月过滤数量,javascript,csv,d3.js,Javascript,Csv,D3.js,我是D3.js新手,在从csv文件读取数据时遇到问题。目前我的数据集有3列:1)日期,2)产品名称,3)数量。我想显示我每月的销售量。现在,我使用数据透视表按月份过滤数据,另存为新的csv文件,然后将其解析为d3.csv方法以显示在条形图中 理想情况下,我希望使用d3.js从原始数据集中读取数据,以显示我每月的销售量条形图。此外,我希望能够过滤我的条形图,以显示按产品销售的数量 e、 g.如果我通过下拉框选择产品A,条形图将相应地变换,以显示1月、2月A产品的销售数量。。。。一直到十二月 有人能
有人能帮我吗?或者将我与一个示例/教程链接以实现此目的。我不太明白您想要什么,但您可以在d3.js网站()中找到许多示例和文档 编辑: 您可以这样做(我只是硬编码数据,但很容易适应): html: css: 这里有一个
<svg id="visualisation" width="1000" height="500"></svg>
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);
});
}
.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;
}