javascript - Add legend to d3 scatterplot matrix -
i'm trying add legend d3 scatterplot matrix (using example template: http://bl.ocks.org/mbostock/4063663), , while scatterplot displaying expected, have been unable add legend. code plot , 1 of attempts @ adding legend below:
var width = 960, size = 150, padding = 19.5; var x = d3.scale.linear() .range([padding / 2, size - padding / 2]); var y = d3.scale.linear() .range([size - padding / 2, padding / 2]); var xaxis = d3.svg.axis() .scale(x) .orient("bottom") .ticks(5); var yaxis = d3.svg.axis() .scale(y) .orient("left") .ticks(5); var color = d3.scale.category10(); d3.csv(datafilename, function(error, dataset) { var domainbytrait = {}, traits = d3.keys(dataset[0]).filter(function(d) { return d !== "class"; }), n = traits.length; traits.foreach(function(trait) { domainbytrait[trait] = d3.extent(dataset, function(d) { return d[trait]; }); }); xaxis.ticksize(size * n); yaxis.ticksize(-size * n); var brush = d3.svg.brush() .x(x) .y(y) .on("brushstart", brushstart) .on("brush", brushmove) .on("brushend", brushend); var svg = d3.select("#visualizationdiv").append("svg") .attr("width", size * n + padding) .attr("height", size * n + padding) .append("g") .attr("transform", "translate(" + padding + "," + padding / 2 + ")"); svg.selectall(".x.axis") .data(traits) .enter().append("g") .attr("class", "x axis") .attr("transform", function(d, i) { return "translate(" + (n - - 1) * size + ",0)"; }) .each(function(d) { x.domain(domainbytrait[d]); d3.select(this).call(xaxis); }); svg.selectall(".y.axis") .data(traits) .enter().append("g") .attr("class", "y axis") .attr("transform", function(d, i) { return "translate(0," + * size + ")"; }) .each(function(d) { y.domain(domainbytrait[d]); d3.select(this).call(yaxis); }); var cell = svg.selectall(".cell") .data(cross(traits, traits)) .enter().append("g") .attr("class", "cell") .attr("transform", function(d) { return "translate(" + (n - d.i - 1) * size + "," + d.j * size + ")"; }) .each(plot); // titles diagonal. cell.filter(function(d) { return d.i === d.j; }).append("text") .attr("x", padding) .attr("y", padding) .attr("dy", ".71em") .text(function(d) { return d.x; }); cell.call(brush); function plot(p) { var cell = d3.select(this); x.domain(domainbytrait[p.x]); y.domain(domainbytrait[p.y]); cell.append("rect") .attr("class", "frame") .attr("x", padding / 2) .attr("y", padding / 2) .attr("width", size - padding) .attr("height", size - padding); cell.selectall("circle") .data(dataset) .enter().append("circle") .attr("cx", function(d) { return x(d[p.x]); }) .attr("cy", function(d) { return y(d[p.y]); }) .attr("r", 3) .style("fill", function(d) { return color(d.class); }); } var brushcell; // clear previously-active brush, if any. function brushstart(p) { if (brushcell !== this) { d3.select(brushcell).call(brush.clear()); x.domain(domainbytrait[p.x]); y.domain(domainbytrait[p.y]); brushcell = this; } } // highlight selected circles. function brushmove(p) { var e = brush.extent(); svg.selectall("circle").classed("hidden", function(d) { return e[0][0] > d[p.x] || d[p.x] > e[1][0] || e[0][1] > d[p.y] || d[p.y] > e[1][1]; }); } // if brush empty, select circles. function brushend() { if (brush.empty()) svg.selectall(".hidden").classed("hidden", false); } function cross(a, b) { var c = [], n = a.length, m = b.length, i, j; (i = -1; ++i < n;) (j = -1; ++j < m;) c.push({x: a[i], i: i, y: b[j], j: j}); return c; } d3.select(self.frameelement).style("height", size * n + padding + 20 + "px"); // add legend var legend = svg.append("g") .attr("class", "legend") .attr("height", 100) .attr("width", 100) .attr('transform', 'translate(-20,50)'); legend.selectall('rect') .data(dataset) .enter() .append("rect") .attr("x", width - 65) .attr("y", function(d, i){ return * 20;}) .attr("width", 10) .attr("height", 10) .style("fill", function(d) { return color(d.class); }); legend.selectall('text') .data(dataset) .enter() .append("text") .attr("x", width - 52) .attr("y", function(d, i){ return * 20 + 9;}) .text(function(d) { return d.class; }); }); among other unsuccessful attempts @ adding legend are
var legend = svg.selectall("g") .data(dataset) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(0," + * 20 + ")"; }); legend.append("rect") .attr("x", width - 28) .attr("width", 18) .attr("height", 18) .style("fill", function(d) { return color(d.class); }); legend.append("text") .attr("x", width - 34) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "end") .text(function(d) { return d.class; }); and
var legend = svg.selectall('g').data(dataset) .enter() .append('g') .attr("class", "legend"); legend.append("rect") .attr("x", width - 45) .attr("y", 25) .attr("height", 50) .attr("width", 50) .each(function(d, i) { var g = d3.select(this); g.append("rect") .attr("x", width - 65) .attr("y", i*25) .attr("width", 10) .attr("height", 10) .style("fill", function(d) { return color(d.class); }); g.append("text") .attr("x", width - 50) .attr("y", * 25 + 8) .attr("height",30) .attr("width",100) .style("fill", function(d) { return color(d.class); }) .text(function(d) { return d.class; }); all based on examples i've found on web. none of these approaches seem working - must missing here. insights or suggestions appreciated.
the problem right @ beginning:
var legend = svg.selectall('g').data(dataset) .enter() .append('g') .attr("class", "legend"); the selectall('g') going select 1 of groups in diagram, , nothing happen because enter() indicates there on (including value gets saved legend variable) applies groups don't exist yet.
i'm pretty sure legend code supposed run within own <g> element. way, won't interfere rest of graph.
var legendgroup = svg.append('g') .attr('class', 'legend') .attr('transform', /* translate appropriate */); var legendentry = legendgroup.selectall('g') .data(dataset); //create 1 legend entry each series in dataset array //if that's not want, create array has 1 //value every entry want in legend legendentry.enter().append("g") .attr("class", "legend-entry") .attr("transform", function(d, i) { return "translate(0," + * 20 + ")"; }); //shift each entry down approx 1 line (20px) legendentry.append("rect") //add square each entry /* , on */
Comments
Post a Comment