D3，多维数据并输入（）

我是一个刚刚接触JS和D3的R用户，我正努力处理比单线图更精致的示例。我有一个嵌套的数据结构（下面），并希望将数据映射到基于第一个图层的每个面板上，并且将数据映射到第二个图层上的每个数据系列。然而，.enter（）似乎击中了第一层，并且只画出了许多点。D3，多维数据并输入（）

A mockup of what I want, in R。是否有关于多个图，线和嵌套数据输入的示例？我应该在这里做什么？

下从here的例子保证金约定我现在的失败尝试：

var data = [{"A": [{"y": 1, "x": 360}, {"y": 2, "x": 541}, {"y": 3, "x": 634}, {"y": 4, "x": 818}, {"y": 5, "x": 879}, {"y": 6, "x": 1014}, {"y": 7, "x": 1136}, {"y": 8, "x": 1237}, {"y": 9, "x": 1415}, {"y": 10, "x": 1594}, {"y": 11, "x": 1594}], "B": [{"y": 1, "x": 401}, {"y": 2, "x": 541}, {"y": 3, "x": 613}, {"y": 4, "x": 679}, {"y": 5, "x": 741}, {"y": 6, "x": 914}, {"y": 7, "x": 1189}, {"y": 8, "x": 1312}, {"y": 9, "x": 1577}, {"y": 10, "x": 1635}, {"y": 11, "x": 1664}, {"y": 12, "x": 1725}, {"y": 13, "x": 1854}, {"y": 14, "x": 1885}], "C": [{"y": 1, "x": 414}, {"y": 2, "x": 539}, {"y": 3, "x": 696}, {"y": 4, "x": 815}, {"y": 5, "x": 926}, {"y": 6, "x": 1204}, {"y": 7, "x": 1234}, {"y": 8, "x": 1368}, {"y": 9, "x": 1638}, {"y": 10, "x": 1671}, {"y": 11, "x": 1708}], "D": [{"y": 1, "x": 362}, {"y": 2, "x": 492}, {"y": 3, "x": 539}, {"y": 4, "x": 584}, {"y": 5, "x": 651}, {"y": 6, "x": 730}, {"y": 7, "x": 812}, {"y": 8, "x": 990}, {"y": 9, "x": 1190}, {"y": 10, "x": 1366}, {"y": 11, "x": 1523}, {"y": 12, "x": 1853}, {"y": 13, "x": 1853}], "E": [{"y": 1, "x": 372}, {"y": 2, "x": 544}, {"y": 3, "x": 631}, {"y": 4, "x": 716}, {"y": 5, "x": 807}, {"y": 6, "x": 922}, {"y": 7, "x": 1145}, {"y": 8, "x": 1147}, {"y": 9, "x": 1373}, {"y": 10, "x": 1568}, {"y": 11, "x": 1642}, {"y": 12, "x": 1782}, {"y": 13, "x": 1847}, {"y": 14, "x": 1848}]}, {"F": [{"y": 1, "x": 362}, {"y": 2, "x": 524}, {"y": 3, "x": 597}, {"y": 4, "x": 661}, {"y": 5, "x": 725}, {"y": 6, "x": 862}, {"y": 7, "x": 948}, {"y": 8, "x": 982}, {"y": 9, "x": 1130}, {"y": 10, "x": 1225}, {"y": 11, "x": 1411}, {"y": 12, "x": 1633}, {"y": 13, "x": 1804}, {"y": 14, "x": 1851}], "G": [{"y": 1, "x": 429}, {"y": 2, "x": 544}, {"y": 3, "x": 610}, {"y": 4, "x": 702}, {"y": 5, "x": 808}, {"y": 6, "x": 931}, {"y": 7, "x": 1202}, {"y": 8, "x": 1339}, {"y": 9, "x": 1401}, {"y": 10, "x": 1487}, {"y": 11, "x": 1490}, {"y": 12, "x": 1807}, {"y": 13, "x": 1845}], "H": [{"y": 1, "x": 366}, {"y": 2, "x": 542}, {"y": 3, "x": 593}, {"y": 4, "x": 661}, {"y": 5, "x": 842}, {"y": 6, "x": 845}, {"y": 7, "x": 930}, {"y": 8, "x": 978}, {"y": 9, "x": 1088}, {"y": 10, "x": 1304}, {"y": 11, "x": 1336}, {"y": 12, "x": 1485}, {"y": 13, "x": 1538}, {"y": 14, "x": 1587}, {"y": 15, "x": 1588}, {"y": 16, "x": 1691}, {"y": 17, "x": 1740}, {"y": 18, "x": 1741}, {"y": 19, "x": 1742}, {"y": 20, "x": 1783}, {"y": 21, "x": 1863}], "I": [{"y": 1, "x": 418}, {"y": 2, "x": 518}, {"y": 3, "x": 596}, {"y": 4, "x": 664}, {"y": 5, "x": 858}, {"y": 6, "x": 927}, {"y": 7, "x": 972}, {"y": 8, "x": 1028}, {"y": 9, "x": 1125}, {"y": 10, "x": 1397}, {"y": 11, "x": 1401}, {"y": 12, "x": 1737}, {"y": 13, "x": 1835}, {"y": 14, "x": 1915}], "J": [{"y": 1, "x": 367}, {"y": 2, "x": 498}, {"y": 3, "x": 555}, {"y": 4, "x": 622}, {"y": 5, "x": 680}, {"y": 6, "x": 792}, {"y": 7, "x": 872}, {"y": 8, "x": 931}, {"y": 9, "x": 1069}, {"y": 10, "x": 1141}, {"y": 11, "x": 1232}, {"y": 12, "x": 1396}, {"y": 13, "x": 1485}, {"y": 14, "x": 1561}, {"y": 15, "x": 1624}, {"y": 16, "x": 1777}, {"y": 17, "x": 1841}, {"y": 18, "x": 1841}]}] 
params = {"x_min": 360, "y_max": 21, "y_min": 1, "x_max": 1915}; 



var margin = {top: 20, right: 20, bottom: 20, left: 20}, 
    padding = {top: 60, right: 60, bottom: 60, left: 60}, 
    outerWidth = 500, 
    outerHeight = 500, 
    innerWidth = outerWidth - margin.left - margin.right, 
    innerHeight = outerHeight - margin.top - margin.bottom, 
    width = innerWidth - padding.left - padding.right, 
    height = innerHeight - padding.top - padding.bottom; 

var line = d3.svg.line().interpolate('basis') 
    .x(function(d){return x(d.x_var)}) 
    .y(function(d){return y(d.y_var)}); 



// Insert an svg:svg element (with margin) for each row in our dataset. A 
// child svg:g element translates the origin to the pie center. 
var svg = d3.select("body").selectAll("svg") 
    .data(data) 
    .enter().append("svg:svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 

var x = d3.scale.linear().domain([params['x_min'],params['x_max']]).range([0, width]); 

var y = d3.scale.linear().domain([params['y_min'], params['y_max']]).range([height,0]); 

var xAxis = d3.svg.axis().scale(x).orient("bottom"), 
    yAxis = d3.svg.axis().scale(y).orient("left"); 


var g = svg.append("g") 

    .attr("width", outerWidth) 
    .attr("height", outerHeight) 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

g.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

g.append("g") 
    .attr("class", "y axis") 
    .attr("transform", "translate(0,0)") 
    .call(yAxis); 
g.selectAll('circle').data(data).enter() 
     .append("circle") 
     .attr("class", "circle") 
     .attr("cx", function(d){return x(500)}) 
     .attr("cy", function(d){return y(5)}) 
     .attr("r", 4)

来源

2014-02-07 bwarren2

您需要一个[嵌套选择]（http://bost.ocks.org/mike/nest/）。从外观上看，三层嵌套 - 顶层人物，第二层人物组和第二层人物线。 –

子选择，使用nest（）进行良好的数据结构化，并最终围绕反向数据绑定进行工作。 – bwarren2

太棒了，你会介意发布你做为参考答案吗？ –

得到它的工作，并增加了一些花俏。（提示工具提示的鼠标悬停点，图例中鼠标悬停的颜色块淡出其他系列，点击网址点。）

转换中要注意的关键事项：数据集只是一个对象数组，它被重构nest（）变成友好的形式。这稍后强制重写数据访问调用。

function convertToSlug(Text) 
{ 
    return Text 
     .toLowerCase() 
     .replace(/ /g,'-') 
     .replace(/[^\w-]+/g,'') 
     ; 
} 

var getVals = function(obj){ 
    var vals = []; 
    for(var key in obj){ 
     vals.push(obj[key]); 
    } 
    return vals; 
} 

var data_structure = {"data": [{"y_var": 1, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 1", "group_var": "Group 1", "x_var": 12}, {"y_var": 2, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 1", "group_var": "Group 1", "x_var": 13}, {"y_var": 3, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 1", "group_var": "Group 1", "x_var": 14}, {"y_var": 4, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 1", "group_var": "Group 1", "x_var": 16}, {"y_var": 5, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 1", "group_var": "Group 1", "x_var": 17}, {"y_var": 6, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 1", "group_var": "Group 1", "x_var": 18}, {"y_var": 7, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 1", "group_var": "Group 1", "x_var": 20}, {"y_var": 8, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 1", "group_var": "Group 1", "x_var": 21}, {"y_var": 9, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 1", "group_var": "Group 1", "x_var": 23}, {"y_var": 10, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 1", "group_var": "Group 1", "x_var": 25}, {"y_var": 11, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 1", "group_var": "Group 1", "x_var": 26}, {"y_var": 1, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 2", "group_var": "Group 2", "x_var": 12}, {"y_var": 2, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 2", "group_var": "Group 2", "x_var": 14}, {"y_var": 3, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 2", "group_var": "Group 2", "x_var": 16}, {"y_var": 4, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 2", "group_var": "Group 2", "x_var": 19}, {"y_var": 5, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 2", "group_var": "Group 2", "x_var": 24}, {"y_var": 6, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 2", "group_var": "Group 2", "x_var": 25}, {"y_var": 7, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 2", "group_var": "Group 2", "x_var": 25}, {"y_var": 8, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 2", "group_var": "Group 2", "x_var": 27}, {"y_var": 1, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 3", "group_var": "Group 3", "x_var": 12}, {"y_var": 2, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 3", "group_var": "Group 3", "x_var": 14}, {"y_var": 3, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 3", "group_var": "Group 3", "x_var": 15}, {"y_var": 4, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 3", "group_var": "Group 3", "x_var": 17}, {"y_var": 5, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 3", "group_var": "Group 3", "x_var": 17}, {"y_var": 6, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 3", "group_var": "Group 3", "x_var": 19}, {"y_var": 7, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 3", "group_var": "Group 3", "x_var": 20}, {"y_var": 8, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 3", "group_var": "Group 3", "x_var": 21}, {"y_var": 9, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 3", "group_var": "Group 3", "x_var": 24}, {"y_var": 10, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 3", "group_var": "Group 3", "x_var": 25}, {"y_var": 11, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 3", "group_var": "Group 3", "x_var": 27}, {"y_var": 1, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 4", "group_var": "Group 4", "x_var": 11}, {"y_var": 2, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 4", "group_var": "Group 4", "x_var": 14}, {"y_var": 3, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 4", "group_var": "Group 4", "x_var": 16}, {"y_var": 4, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 4", "group_var": "Group 4", "x_var": 20}, {"y_var": 5, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 4", "group_var": "Group 4", "x_var": 24}, {"y_var": 6, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 4", "group_var": "Group 4", "x_var": 25}, {"y_var": 7, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 4", "group_var": "Group 4", "x_var": 27}, {"y_var": 8, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 4", "group_var": "Group 4", "x_var": 27}, {"y_var": 1, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 5", "group_var": "Group 5", "x_var": 11}, {"y_var": 2, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 5", "group_var": "Group 5", "x_var": 15}, {"y_var": 3, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 5", "group_var": "Group 5", "x_var": 15}, {"y_var": 4, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 5", "group_var": "Group 5", "x_var": 16}, {"y_var": 5, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 5", "group_var": "Group 5", "x_var": 17}, {"y_var": 6, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 5", "group_var": "Group 5", "x_var": 19}, {"y_var": 7, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 5", "group_var": "Group 5", "x_var": 21}, {"y_var": 8, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 5", "group_var": "Group 5", "x_var": 23}, {"y_var": 9, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 5", "group_var": "Group 5", "x_var": 25}, {"y_var": 10, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 5", "group_var": "Group 5", "x_var": 27}, {"y_var": 11, "split_var": "Split 1", "tooltip": "Point Tooltip", "label": "Group 5", "group_var": "Group 5", "x_var": 27}, {"y_var": 1, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 6", "group_var": "Group 6", "x_var": 12}, {"y_var": 2, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 6", "group_var": "Group 6", "x_var": 14}, {"y_var": 3, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 6", "group_var": "Group 6", "x_var": 15}, {"y_var": 4, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 6", "group_var": "Group 6", "x_var": 16}, {"y_var": 5, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 6", "group_var": "Group 6", "x_var": 17}, {"y_var": 6, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 6", "group_var": "Group 6", "x_var": 18}, {"y_var": 7, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 6", "group_var": "Group 6", "x_var": 20}, {"y_var": 8, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 6", "group_var": "Group 6", "x_var": 21}, {"y_var": 9, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 6", "group_var": "Group 6", "x_var": 25}, {"y_var": 10, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 6", "group_var": "Group 6", "x_var": 28}, {"y_var": 1, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 7", "group_var": "Group 7", "x_var": 11}, {"y_var": 2, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 7", "group_var": "Group 7", "x_var": 15}, {"y_var": 3, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 7", "group_var": "Group 7", "x_var": 19}, {"y_var": 4, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 7", "group_var": "Group 7", "x_var": 22}, {"y_var": 5, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 7", "group_var": "Group 7", "x_var": 26}, {"y_var": 6, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 7", "group_var": "Group 7", "x_var": 29}, {"y_var": 7, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 7", "group_var": "Group 7", "x_var": 29}, {"y_var": 1, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 8", "group_var": "Group 8", "x_var": 11}, {"y_var": 2, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 8", "group_var": "Group 8", "x_var": 14}, {"y_var": 3, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 8", "group_var": "Group 8", "x_var": 15}, {"y_var": 4, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 8", "group_var": "Group 8", "x_var": 16}, {"y_var": 5, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 8", "group_var": "Group 8", "x_var": 17}, {"y_var": 6, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 8", "group_var": "Group 8", "x_var": 20}, {"y_var": 7, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 8", "group_var": "Group 8", "x_var": 24}, {"y_var": 8, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 8", "group_var": "Group 8", "x_var": 29}, {"y_var": 1, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 9", "group_var": "Group 9", "x_var": 13}, {"y_var": 2, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 9", "group_var": "Group 9", "x_var": 19}, {"y_var": 3, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 9", "group_var": "Group 9", "x_var": 21}, {"y_var": 4, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 9", "group_var": "Group 9", "x_var": 25}, {"y_var": 5, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 9", "group_var": "Group 9", "x_var": 27}, {"y_var": 6, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 9", "group_var": "Group 9", "x_var": 29}, {"y_var": 7, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 9", "group_var": "Group 9", "x_var": 29}, {"y_var": 1, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 10", "group_var": "Group 10", "x_var": 12}, {"y_var": 2, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 10", "group_var": "Group 10", "x_var": 14}, {"y_var": 3, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 10", "group_var": "Group 10", "x_var": 15}, {"y_var": 4, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 10", "group_var": "Group 10", "x_var": 16}, {"y_var": 5, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 10", "group_var": "Group 10", "x_var": 18}, {"y_var": 6, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 10", "group_var": "Group 10", "x_var": 19}, {"y_var": 7, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 10", "group_var": "Group 10", "x_var": 21}, {"y_var": 8, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 10", "group_var": "Group 10", "x_var": 24}, {"y_var": 9, "split_var": "Split 2", "tooltip": "Point Tooltip", "label": "Group 10", "group_var": "Group 10", "x_var": 27}], "parameters": {"y_min": 1, "x_label": "Time (m)", "y_label": "Level", "y_max": 11, "x_max": 29, "draw_path": true, "x_min": 11}} 

raw_data = data_structure['data'] 
params = data_structure['parameters'] 
var margin = {top: 20, right: 20, bottom: 20, left: 20}, 
    padding = {top: 0, right: 0, bottom: 0, left: 0}, 
    outerWidth = 400, 
    outerHeight = 400, 
    innerWidth = outerWidth - margin.left - margin.right, 
    innerHeight = outerHeight - margin.top - margin.bottom, 
    width = innerWidth - padding.left - padding.right, 
    height = innerHeight - padding.top - padding.bottom; 
data = d3.nest().key(function(d){return d.split_var;}).key(function(d){return d.group_var;}).entries(raw_data); 

var div = d3.select("body").append("div") 
    .attr("class", "tooltip") 
    .style("opacity", 0); 


var svg = d3.select("#chart").selectAll("svg") 
    .data(data) 
    .enter().append("svg:svg") 
    .attr("width", outerWidth) 
    .attr("height", outerHeight); 

var line = d3.svg.line() 
    .interpolate("linear") 
    .x(function(d) { return x(d.x_var); }) 
    .y(function(d) { return y(d.y_var); }); 


var x = d3.scale.linear().domain([params['x_min'],params['x_max']]).range([0, width]); 
    var y = d3.scale.linear().domain([params['y_min'], params['y_max']]).range([height,0]); 

var xAxis = d3.svg.axis().scale(x).orient("bottom"), 
    yAxis = d3.svg.axis().scale(y).orient("left"); 

var color = d3.scale.category10(); 

var g = svg.append("g") 
    .attr("width", width) 
    .attr("height", height) 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

g.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 
    .append("text") 
     .attr("y", -16) 
     .attr("x", width) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text(params['x_label']); 

g.append("g") 
    .attr("class", "y axis") 
    .attr("transform", "translate(0,0)") 
    .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text(params['y_label']); 

g.append("g") 
.attr('class','title') 
.attr("transform", "translate(0,0)") 
.append("text") 
    .attr("x", width/2*1.2) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text(function(d){return d.key;}); 

var series = g.selectAll('.series').data(function(d){ 
     return(d.values); 
    }).enter().append('g') 
.attr("class", 'dataset') 
.attr("id", function(d){return convertToSlug(d.key);}); 

series.selectAll('.points').data(function(d){return d.values;}).enter() 
    .append("a").attr("xlink:href", function(d) {if(d.url){return d.url;} else {return '';}}) 
.append('circle') 
.attr('cx',function(d){return(x(d.x_var)); }) 
.attr('cy',function(d){return(y(d.y_var)); }) 
.attr('r', 5) 
.style("fill", function(d) { return color(String(d.label));}) 
.on("mouseover", function(d) { 
     div.transition() 
      .duration(200) 
      .style("opacity", 0.9); 
     div .html(d.tooltip) 
      .style("left", (d3.event.pageX) + "px") 
      .style("top", (d3.event.pageY - 28) + "px"); 
     }) 
    .on("mouseout", function(d) { 
     div.transition() 
      .duration(500) 
      .style("opacity", 0); 
    }); 

if(params['draw_path']){ 
    series.append("svg:path").attr("d", function(d){return(line(d.values));}) 
    .style("stroke", function(d) { return color(d.values[0].label);}) 
    .style("stroke-width", 3) 
    .style("fill", 'none'); 
} 
var legend = svg.append("g") 
    .attr("class", "legend") 
    .attr("height", 100) 
    .attr("width", 100) 
.attr("transform", "translate(10,20)"); 

var rows = legend.selectAll('rect') 
     .data(function(d){return d.values;}) 
     .enter(); 
    rows.append("rect") 
     .attr("x", 50) 
     .attr("y", function(d, i){ return i * 20;}) 
     .attr("width", 10) 
     .attr("height", 10) 
     .style("fill", function(d) { 
     var return_color = color(d.values[0].label); 
     return return_color; 
     }) 
     .on("mouseover", 
     function (d, i) { 
      d3.selectAll('.dataset').filter(function(p){return convertToSlug(p.key)!=convertToSlug(d.key);}) 
      .transition().duration(1000).style('opacity',0.2); 
     }) 
     .on("mouseout", function(d) { 
      d3.selectAll('.dataset').filter(function(p){return convertToSlug(p.key)!=convertToSlug(d.key);}) 
      .transition().duration(1000).style('opacity',1); 
    }); 

    rows.append('text') 
     .attr("x", 62) 
     .attr("y", function(d, i){ return 11+(i * 20);}) 
     .text(function(d){return d.key;});

来源

2014-02-13 21:51:31 bwarren2

D3，多维数据并输入（）

回答

相关问题