如何改善这种数据可视化？

Question

我有一个d3.js的情节，我想改进它，但我无法弄明白该怎么做！

这是我的情节：

主要是我试图更改轴并添加一个小图例，这样我就能得到这样的东西（在图中居中以x和y为零）：

这就是我在d3.js / JavaScript代码中定义x和y轴的方法

var xScale = d3.scale.linear().domain([d3.min(dataset, function(d) { return d[0]; }), d3.max(dataset, function(d) { return d[0]; })]).range([padding, w - padding]);
var yScale = d3.scale.linear().domain([d3.min(dataset, function(d) { return d[1]; }), d3.max(dataset, function(d) { return d[1]; })]).range([h - padding, padding]);

//  Create axis
var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(5);
            //Define Y axis
var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);

//Create SVG element
var svg = d3.select("#mydiv").append("svg").attr("width", w).attr("height", h);


svg.append("g").attr("class", "axis").attr("transform", "translate(0," + (h - padding) + ")").call(xAxis);
svg.append("g").attr("class", "axis").attr("transform", "translate(" + padding + ",0)").call(yAxis);

提前致谢：

Answer 1

如果您提供实际的数据集，我可以为您的案例提供更准确的代码，没有它我们真正做的最好的就是给您提供文档中的示例。

如何创建图例：

   // draw legend
  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  // draw legend colored rectangles
  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  // draw legend text
  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d;})

如何在轴上硬编码最大/最小值：

var yScale = d3.scale.linear().domain([0,6]).range([h - padding, padding]);

如何添加网格线：

var yAxisGrid = yAxis
  .tickSize(width, 0)
  .tickFormat("")
  .orient("right")

var xAxisGrid = xAxis
  .tickSize(-height, 0)
  .tickFormat("")
  .orient("top")

svg.append("g")
  .classed('y', true)
  .classed('axis', true)
  .call(yAxisGrid)

svg.append("g")
  .classed('x', true)
  .classed('axis', true)
  .call(xAxisGrid)