分類散點圖使用d3.js的JavaScript

我需要使用d3.js提出關於降雨量一些分類數據的散點圖在3個城市3年：分類散點圖使用d3.js的JavaScript

Year1 Year2 Year3 
NY CA TX NY CA TX NY CA TX 
17 20 15 23 10 11 14 15 17 
16 18 12 15 21 22 20 18 19 
13 22 16 17 25 18 17 25 18 
19 18 13 16 21 20 22 15 16

This is how the graph should look like （注：數據和陰謀不匹配在這裏，它只是解釋我的查詢）我是完全新的d3.js。我已經嘗試了一些簡單散點圖和條形圖的教程，但我無法弄清楚如何顯示像這樣的分類圖。

任何幫助讓我開始將不勝感激。

[編輯] 我重新排列的數據在TSV文件，所以它看起來是這樣的：

year state rain 
1 NY 17 
1 NY 16 
1 NY 13 
1 CA 20 
1 TX 15 
2 NY 23 
3 CA 10 
3 TX 14 
3 NY 13

似乎有一些問題。我得到「意外的值NaN解析cx屬性」。和cy相同。任何想法如何解決它？

var newArray = new Array(); 
     // draw the scatterplot 
     svg.selectAll("dot")         // provides a suitable grouping for the svg elements that will be added 
      .data(data)           // associates the range of data to the group of elements 
     .enter().append("circle")        // adds a circle for each data point 
      .attr("r", 5)          // with a radius of 3.5 pixels 
      .attr("cx", function (d) { 

       newArray = data.filter(function (el) { 
        return el.category == "NY"; 
       }); 

       return xScale(newArray.rain); 
      })  // at an appropriate x coordinate 
      .attr("cy", function (d) { 
       return yScale(newArray.year); 
      }) // and an appropriate y coordinate 
      .style("fill", color(9));

來源

2013-09-24 user1340852

[NVD3 scatterplot]（http://nvd3.org/ghpages/scatter.html）可能是一個很好的開始。 –

@LarsKotthoff：我只能使用d3。我更新了這個問題。你能看一下嗎？ – user1340852

NVD3基於D3。除非您向我們展示完整的代碼，否則我無法真正幫助您。 –

在d3中有多種方法可以做到這一點，有自己的優缺點。

坦率地說，這個問題對於這個論壇太模糊了，但我發現你提出的這個挑戰有趣。所以我嘲笑了做Y軸的一種方法。 http://jsfiddle.net/7Jpw2/2/

它使用順序量表的狀態和多年另一順序量表重疊在第一個

這個頂部可能不是一個完整的答案，但它應該讓你去很遠。

var categories = [ 
    { year:3, state:'NY' }, 
    { year:3, state:'CA' }, 
    { year:3, state:'TX' }, 
    { year:2, state:'NY' }, 
    { year:2, state:'CA' }, 
    { year:2, state:'TX' }, 
    { year:1, state:'NY' }, 
    { year:1, state:'CA' }, 
    { year:1, state:'TX' } 
]; 

// IMPORTANT! This is a way to make each state @ year unique, by returning a concatenation of state and year 
categories.forEach(function(cat) { 
    cat.toString = function() { return this.state + '_' + this.year } 
}); 

// These year values should ideally be extracted from categories array above, not hardcoded as below 
var years = ['Year 1', 'Year 2', 'Year 3']; 

var svg = d3.select('body').append('svg'); 

// Create 2 axes: 
// First a state-name axis 
// Then a year axis, in which everything except the text is invisible (via css fill:none) 

var statesScale = d3.scale.ordinal() 
    .domain(categories) 
    .rangeBands([50,300]); 
var statesAxis = d3.svg.axis() 
    .orient('left') 
    .tickFormat(function(d) { return d.state; }) 
    .scale(statesScale) 

var yearsScale = d3.scale.ordinal() 
    .domain(years) 
    .rangeBands([50,300]); 
var yearsAxis = d3.svg.axis() 
    .orient('left') 
    .tickSize(50) // Distances the year label from state labels 
    .scale(yearsScale) 


svg.append('g') 
    .attr('class', 'states-axis') 
    .attr('transform', 'translate(150,0)') 
    .call(statesAxis); 

svg.append('g') 
    .attr('class', 'years-axis') 
    .attr('transform', 'translate(150,0)') 
    .call(yearsAxis);

來源

2013-09-27 20:51:13 meetamit

分類散點圖使用d3.js的JavaScript

回答

相關問題