如何改进这种数据可视化？答案

【问题标题】：How to improve this data-visualisation?如何改进这种数据可视化？
【发布时间】：2015-08-05 00:42:28
【问题描述】：

我有一个 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);

提前致谢：

【问题讨论】：

要“缩小”一点，将d3.max 的结果乘以大于1 的数字，并将d3.min 的结果乘以小于1 的数字，例如分别为 1.05 和 0.95。

标签： javascript html d3.js data-visualization

【解决方案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)

【讨论】：