如何使用d3js实现关节图
[英]How to implement a jointplot using d3js
问题描述
我正在使用d3js进行一个可视化项目。 我有一些需要可视化的分布式数据集：
这种可视化是在python中使用seaborn.jointplot完成的，但是我需要使用d3js来实现，在d3js中还有其他选择吗？ 如何在d3js中完成？
1 个解决方案
解决方案1
5 已采纳 2016-07-30 16:59:47
看起来很酷的情节，我今天早上有一些时间，所以这是d3 v4的最小实现：
<!DOCTYPE html> <meta charset="utf-8"> <body> <script src="//d3js.org/d3.v4.min.js"></script> <script> // set the dimensions and margins of the graph var margin = { top: 80, right: 80, bottom: 20, left: 20 }, width = 400 - margin.left - margin.right, height = 400 - margin.top - margin.bottom; var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var x = d3.scaleLinear().range([0, width]).domain([0, 10]), y = d3.scaleLinear().range([height, 0]).domain([0, 10]); // Add the X Axis g.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); // Add the Y Axis g.append("g") .call(d3.axisLeft(y)); var random = d3.randomNormal(0, 1.2), data = d3.range(100).map(function() { return [random() + 5, random() + 5]; }); g.selectAll(".point") .data(data) .enter() .append("circle") .attr("cx", function(d) { return x(d[0]); }) .attr("cy", function(d) { return y(d[1]); }) .attr("r", 7) .style("fill", "steelblue") .style("stroke", "lightgray"); // top histogram var gTop = svg.append("g") .attr("transform", "translate(" + margin.left + "," + 0 + ")"); var xBins = d3.histogram() .domain(x.domain()) .thresholds(x.ticks(10)) .value(function(d) { return d[0]; })(data); var xy = d3.scaleLinear() .domain([0, d3.max(xBins, function(d) { return d.length; })]) .range([margin.top, 0]); var xBar = gTop.selectAll(".bar") .data(xBins) .enter().append("g") .attr("class", "bar") .attr("transform", function(d) { return "translate(" + x(d.x0) + "," + xy(d.length) + ")"; }); var bWidth = x(xBins[0].x1) - x(xBins[0].x0) - 1; xBar.append("rect") .attr("x", 1) .attr("width", bWidth) .attr("height", function(d) { return margin.top - xy(d.length); }) .style("fill", "steelblue"); xBar.append("text") .attr("dy", ".75em") .attr("y", 2) .attr("x", bWidth / 2) .attr("text-anchor", "middle") .text(function(d) { return d.length < 4 ? "" : d.length; }) .style("fill", "white") .style("font", "9px sans-serif"); // right histogram var gRight = svg.append("g") .attr("transform", "translate(" + (margin.left + width) + "," + margin.top + ")"); var yBins = d3.histogram() .domain(y.domain()) .thresholds(y.ticks(10)) .value(function(d) { return d[1]; })(data); var yx = d3.scaleLinear() .domain([0, d3.max(yBins, function(d) { return d.length; })]) .range([0, margin.right]); var yBar = gRight.selectAll(".bar") .data(yBins) .enter().append("g") .attr("class", "bar") .attr("transform", function(d) { return "translate(" + 0 + "," + y(d.x1) + ")"; }); var bWidth = y(yBins[0].x0) - y(yBins[0].x1) - 1; yBar.append("rect") .attr("y", 1) .attr("width", function(d) { return yx(d.length); }) .attr("height", bWidth) .style("fill", "steelblue"); yBar.append("text") .attr("dx", "-.75em") .attr("y", bWidth / 2 + 1) .attr("x", function(d) { return yx(d.length); }) .attr("text-anchor", "middle") .text(function(d) { return d.length < 4 ? "" : d.length; }) .style("fill", "white") .style("font", "9px sans-serif"); </script> </body> </html>
d3.js版本3示例：
<!DOCTYPE html> <meta charset="utf-8"> <head> <style> .bar { fill: steelblue; } .bar:hover { fill: brown; } .axis { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .x.axis path { display: none; } </style> </head> <body> <script src="//d3js.org/d3.v3.min.js"></script> <script> // set the dimensions and margins of the graph var margin = { top: 80, right: 80, bottom: 20, left: 20 }, width = 400 - margin.left - margin.right, height = 400 - margin.top - margin.bottom; var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var x = d3.scale.linear().range([0, width]).domain([0, 10]), y = d3.scale.linear().range([height, 0]).domain([0, 10]); // Add the X Axis g.append("g") .attr("class", "axis") .attr("transform", "translate(0," + height + ")") .call(d3.svg.axis().orient("bottom").scale(x)); // Add the Y Axis g.append("g") .attr("class", "axis") .call(d3.svg.axis().orient("left").scale(y)); var random = d3.random.normal(0, 1.2), data = d3.range(100).map(function() { return [random() + 5, random() + 5]; }); g.selectAll(".point") .data(data) .enter() .append("circle") .attr("cx", function(d) { return x(d[0]); }) .attr("cy", function(d) { return y(d[1]); }) .attr("r", 7) .style("fill", "steelblue") .style("stroke", "lightgray"); // top histogram var gTop = svg.append("g") .attr("transform", "translate(" + margin.left + "," + 0 + ")"); var xBins = d3.layout.histogram() .range(x.domain()) .bins(x.ticks(10)) .value(function(d) { return d[0]; })(data); var xy = d3.scale.linear() .domain([0, d3.max(xBins, function(d) { return d.length; })]) .range([margin.top, 0]); var xBar = gTop.selectAll(".bar") .data(xBins) .enter().append("g") .attr("class", "bar") .attr("transform", function(d) { return "translate(" + x(dx) + "," + xy(d.length) + ")"; }); var bWidth = x(xBins[0].dx) - 1; xBar.append("rect") .attr("x", 1) .attr("width", bWidth) .attr("height", function(d) { return margin.top - xy(d.length); }) .style("fill", "steelblue"); xBar.append("text") .attr("dy", ".75em") .attr("y", 2) .attr("x", bWidth / 2) .attr("text-anchor", "middle") .text(function(d) { return d.length < 4 ? "" : d.length; }) .style("fill", "white") .style("font", "9px sans-serif"); // right histogram var gRight = svg.append("g") .attr("transform", "translate(" + (margin.left + width) + "," + margin.top + ")"); var yBins = d3.layout.histogram() .range(y.domain()) .bins(y.ticks(10)) .value(function(d) { return d[1]; })(data); console.log(yBins); var yx = d3.scale.linear() .domain([0, d3.max(yBins, function(d) { return d.length; })]) .range([0, margin.right]); var yBar = gRight.selectAll(".bar") .data(yBins) .enter().append("g") .attr("class", "bar") .attr("transform", function(d) { return "translate(" + 0 + "," + y(dx + d.dx) + ")"; }); yBar.append("rect") .attr("y", 1) .attr("width", function(d) { return yx(d.length); }) .attr("height", bWidth) .style("fill", "steelblue"); yBar.append("text") .attr("dx", "-.75em") .attr("y", bWidth / 2 + 1) .attr("x", function(d) { return yx(d.length); }) .attr("text-anchor", "middle") .text(function(d) { return d.length < 4 ? "" : d.length; }) .style("fill", "white") .style("font", "9px sans-serif"); </script> </body> </html>
使用d3js将联合情节添加到NBA投篮图表中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.