如何使用d3js实现联合绘图

周杰伦

我正在使用d3js进行一个可视化项目。我有一些需要可视化的分布式数据集:

可视化

这种可视化是seaborn.jointplot在python中完成的,但是我需要使用d3js来实现,在d3js中还有其他选择吗?如何在d3js中完成?

seaborn.jointplot API文档

标记

看起来很酷的情节,我今天早上有一些时间,所以这是d3v4的最小实现:

<!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(d.x) + "," + 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(d.x + 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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用d3js实现关节图

来自分类Dev

如何通过d3js实现svg模式?

来自分类Dev

如何使用d3js获取svg元素的宽度?

来自分类Dev

如何使用d3js间隔定义刻度

来自分类Dev

如何使用d3js间隔定义刻度

来自分类Dev

如何使用d3js拖动完整的svg?

来自分类Dev

如何实现只有完全缩放d3js才能单击气泡

来自分类Dev

使用d3js实现复杂的处理pushMatrix / popMatrix逻辑

来自分类Dev

使用d3js实现复杂的处理pushMatrix / popMatrix逻辑

来自分类Dev

使用d3js排序

来自分类Dev

使用d3js排序

来自分类Dev

当数据链接到变量时,d3js不会绘图

来自分类Dev

如何在D3js强制有向图中为节点实现突出显示和过渡效果?

来自分类Dev

如何在 D3js v4 和 Angular 4 中实现 FontAwesome v5 图标

来自分类Dev

d3js / AngularJS-在angular指令中使用d3js

来自分类Dev

如何使用d3js连接地图上的坐标点?

来自分类Dev

如何使用django可视化d3js中的mysql数据?

来自分类Dev

如何使用angularjs在d3js中制作动态条形图

来自分类Dev

使用D3js,如何从数据库中创建flare.json结构?

来自分类Dev

如何使用D3js在不同时间绘制圆圈?

来自分类Dev

如何使用 D3js 在多线图中不显示缺失值

来自分类Dev

如何进行d3js树设计

来自分类Dev

如何在d3js中垂直树

来自分类Dev

d3js:如何在圆弧的末端放置圆圈

来自分类Dev

如何修复d3js中重叠的弧形标签?

来自分类Dev

如何让d3js图在屏幕外运行

来自分类Dev

如何进行d3js树设计

来自分类Dev

如何在d3js中垂直树

来自分类Dev

如何使用这些标记的联合实现zipPad?