Question

如何使用Plottable.js制作基本的散点图，如下图所示？

我的JSON有问题吗？
如何揭示减号？
你会以不同的方式做其他事吗？

样式无关紧要，默认的Plottable.js就好了。

enter image description here

window.onload = function() {
  var coordinates = [
    {
      x:"-5", 
      y:"3"
    }, {
      x:"2", 
      y:"-1,5"
    }, {
      x:"5", 
      y:"2,5"
    }
  ];
  
  var xScale = new Plottable.Scale.Linear();
  var yScale = new Plottable.Scale.Linear();
  var colorScale = new Plottable.Scale.Color("10");

  var xAxis = new Plottable.Axis.Numeric(xScale, "bottom");
  var yAxis = new Plottable.Axis.Numeric(yScale, "left");

  var plot = new Plottable.Plot.Scatter(xScale, yScale)
                      .addDataset(coordinates)
                      .project("x", "", xScale)
                      .project("y", "", yScale)
                      .project("fill", "", colorScale);
  
  var chart = new Plottable.Component.Table([
      [yAxis, plot],
      [null,  xAxis]
  ]);

  chart.renderTo("#my_chart");
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="https://rawgit.com/palantir/plottable/develop/plottable.css">
  </head>
  <body>
    <svg width="100%" height="600" id="my_chart"></svg>
    <script src="https://rawgit.com/mbostock/d3/master/d3.min.js"></script>
    <script src="https://rawgit.com/palantir/plottable/develop/plottable.min.js"></script>
  </body>
</html>

Answer 1

Mark有正确的想法 - 表系统本身不支持此布局，因此您需要对其布局方式进行一些手动控制。但是，使用Plottable API中有些模糊不清的部分，有一种更清晰，更好地支持的方式来布局你想要的图表，这没有轴稍微偏移的问题。

第一个变化是我们将完全停止使用表格布局引擎，因为它无法完成我们想要的操作。相反，我们将在Component.Group中将所有组件放在一起。一个组只是覆盖同一空间中的组件而不试图完全定位它们。

var chart = new Plottable.Component.Group([yAxis, xAxis, plot]);

然后我们将使用在基础（抽象）组件类上定义的alignment and offset methods。我们将y轴的x坐标设置为“中心”，将x轴的y坐标设置为“中心”这将轴放在图表的中心。

var xAxis = new Plottable.Axis.Numeric(xScale, "bottom").yAlign("center"); var yAxis = new Plottable.Axis.Numeric(yScale, "left").xAlign("center");

我们现在还没有完成，因为要真正使轴线居中，我们需要将它们移回自己宽度的一半。宽度仅在呈现图表时计算（严格来说，在computeLayout调用中，但这是内部细节），因此我们需要在呈现图表后设置偏移量：

chart.renderTo("#plottable"); xAxis.yOffset(xAxis.height()/2); yAxis.xOffset(-yAxis.width()/2);

您可以看到最终结果here (it's a fork of Mark's plnkr)。请注意，现在轴在图表的中心对齐，因为中心点完全在0,0上。

Answer 2

这是我刚刚放在一起的couple examples。第一种是直接d3做你要求的方式。第二个是被黑客攻击plottable.js。使用plottable.js我无法找到将轴定位在其桌面系统之外的方法，我不得不求助于手动移动它们。他们使用的表系统旨在减轻开发人员必须手动定位的问题。当然，这很棒很容易，直到你想要控制位置的位置。

在您渲染绘图表之后，这是黑客攻击：

  // move the axis...
  d3.select(".y-axis")
    .attr('transform',"translate(" + width / 2 + "," + 0 + ")");        
  d3.select(".x-axis")
    .attr("transform", "translate(" + 48 + "," + height / 2 + ")");

请注意，我没有删除绘图表中的左侧边距（上面的48个边框）。这也可以被黑客入侵，但在那时，无论如何，什么是可供选择的情节... < / p>

应该注意的是，每个地块的不同外观完全由CSS控制。

完成d3散点图：

// D3 EXAMPLE
var margin = {
  top: 20,
  right: 20,
  bottom: 20,
  left: 20
},
  width = 500 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()
  .range([0, width]);

var y = d3.scale.linear()
  .range([height, 0]);

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");

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

x.domain([-100, 100]);
y.domain([-100, 100]);

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

svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(" + width / 2 + "," + 0 + ")")
  .call(yAxis)
  .append("text");

svg.selectAll(".dot")
  .data(data)
  .enter().append("circle")
  .attr("class", "dot")
  .attr("r", function(d) {
    return d.r;
  })
  .attr("cx", function(d) {
    return x(d.x);
  })
  .attr("cy", function(d) {
    return y(d.y);
  })
  .style("fill", function(d) {
    return d.c;
  });

enter image description here

Plottable.js：

  // PLOTTABLE.JS
  var xScale = new Plottable.Scale.Linear();
  var yScale = new Plottable.Scale.Linear();

  var xAxis = new Plottable.Axis.Numeric(xScale, "bottom");
  var yAxis = new Plottable.Axis.Numeric(yScale, "left");

  var plot = new Plottable.Plot.Scatter(xScale, yScale);
  plot.addDataset(data);

  function getXDataValue(d) {
    return d.x;
  }
  plot.project("x", getXDataValue, xScale);
  function getYDataValue(d) {
    return d.y;
  }
  plot.project("y", getYDataValue, yScale);
  function getRDataValue(d){
    return d.r;
  }
  plot.project("r", getRDataValue);
  function getFillValue(d){
    return d.c;
  }
  plot.project("fill", getFillValue);
  var chart = new Plottable.Component.Table([
                    [yAxis, plot],
                    [null,  xAxis]
                  ]);
  chart.renderTo("#plottable");

  d3.select(".y-axis")
    .attr('transform',"translate(" + width / 2 + "," + 0 + ")");

  d3.select(".x-axis")
    .attr("transform", "translate(" + 48 + "," + height / 2 + ")");

enter image description here

使用Plottable.js的基本数学101散点图

2 个答案: