在D3中按產品篩選數量的月份

我是D3.js的新手，我遇到了從csv文件讀取數據的問題。目前我的數據集有3列：1）日期，2）產品名稱，3）數量。我想顯示每月銷售的數量。截至目前，我使用數據透視表按月過濾數據，保存爲新的csv文件，然後將其解析爲d3.csv方法以在條形圖中顯示。在D3中按產品篩選數量的月份

理想情況下，我想使用d3.js從我的原始數據集中讀取以顯示按月銷售的數量的條形圖。此外，我希望能夠過濾我的條形圖以顯示產品的銷售數量以及

如果我通過下拉框選擇產品A，條形圖將進行相應的變換，以顯示產品A在1月，2月......至12月的銷售數量。

任何人都可以幫助我嗎？或者通過一個示例/教程來實現這一點。

來源

2016-01-26 Zhou Xuanyi

我真的不明白你想要什麼，但你可以在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; 
    }

here a jsfiddle

來源

2016-01-26 09:57:12 Bato

在D3中按產品篩選數量的月份

回答

相關問題