用于创建带有象限的散点图的库答案

【问题标题】：Library for creating scatter plot charts with quadrants用于创建带有象限的散点图的库
【发布时间】：2015-08-18 22:29:43
【问题描述】：

我必须用象限创建散点图。我查看了 d3.js、high charts、nvd3 等库，但我发现只有普通的散点图。

有人可以建议哪个 js 库可以帮助我实现这一目标吗？

谢谢

【问题讨论】：

标签： javascript d3.js scatter-plot

【解决方案1】：

如果您只是在散点图中为坐标添加负值，则 D3.js 允许使用此功能。就在我的帽子顶部，您可以给点它们的常规坐标，只需将您的 d3.scale 函数的域设置为允许负值。只是一个例子

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

这会将散点图的范围设置为您选择的宽度，但允许所有值都被接受到图中，无论它们是正值还是负值。正如here 很好解释的那样，比例尺适合范围的大小，将域的内容分布在范围内。但是，并不要求所述域是完全肯定的。

如果您检查数据中的最大绝对数，您可以同样设置域的格式，因此轴位于绘图的中心，而不是它们未对齐。

接下来，只需像往常一样添加轴，只需使用 x 和 y 属性将它们移动到画布的中间。

【讨论】：

【解决方案2】：

这是更新的 Plunker 链接，用于通过 d3.js 创建带有象限的散点图：-

http://plnkr.co/edit/yEfkN0tn7DPAypAvyWjD?p=preview

代码：

<script>
var svg = d3.select("#scatter"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    domainwidth = width - margin.left - margin.right,
    domainheight = height - margin.top - margin.bottom;

var x = d3.scaleLinear()
    .domain(padExtent([1,5]))
    .range(padExtent([0, domainwidth]));
var y = d3.scaleLinear()
    .domain(padExtent([1,5]))
    .range(padExtent([domainheight, 0]));

var g = svg.append("g")
        .attr("transform", "translate(" + margin.top + "," + margin.top + ")");

g.append("rect")
    .attr("width", width - margin.left - margin.right)
    .attr("height", height - margin.top - margin.bottom)
    .attr("fill", "#F6F6F6");

d3.json("data.json", function(error, data) {
  if (error) throw error;

  data.forEach(function(d) {
      d.consequence = +d.consequence;
      d.value = +d.value;
  });

  g.selectAll("circle")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 7)
      .attr("cx", function(d) { return x(d.consequence); })
      .attr("cy", function(d) { return y(d.value); })
        .style("fill", function(d) {        
          if (d.value >= 3 && d.consequence <= 3) {return "#60B19C"} // Top Left
          else if (d.value >= 3 && d.consequence >= 3) {return "#8EC9DC"} // Top Right
          else if (d.value <= 3 && d.consequence >= 3) {return "#D06B47"} // Bottom Left
          else { return "#A72D73" } //Bottom Right         
      });

  g.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + y.range()[0] / 2 + ")")
      .call(d3.axisBottom(x).ticks(5));

  g.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + x.range()[1] / 2 + ", 0)")
      .call(d3.axisLeft(y).ticks(5));
});

function padExtent(e, p) {
    if (p === undefined) p = 1;
    return ([e[0] - p, e[1] + p]);
}
</script>

【讨论】：