D3，多维数据和输入（）

Question

我是一个不熟悉JS和D3的R用户，我正在努力解决比1行以上的单个情节更精细的例子。我有一个嵌套的数据结构（下面），并希望将数据映射到基于第一层的每个面板，并将每个数据系列映射到第二层。但是，.enter（）似乎击中了第一层，并且只绘制了那么多点。

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)

Answer 1

搞定了，添加了一些花里胡哨的东西。 （鼠标悬停工具提示的点，图例中的鼠标悬停颜色块以淡出其他系列，单击URL的点。）

转换中需要注意的关键事项：数据集只是一个对象数组，由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;});