Question

我正在尝试修改示例散点图here以包含网格线，并且还可以像我在教程中看到的那样对绘图进行功能化。我能够添加网格线并创建绘图功能，但数据点不再与轴对齐。

问题：如何使数据和轴对齐？

我认为问题在于如何翻译SVG元素或者使用“图表”类。我已尝试使用高度和宽度变量进行各种翻译，但仍然不明白如何使我的网格线和数据匹配，而无需手动翻译，直到它们适合。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Learning D3</title>
    <link rel="stylesheet" href="main.css">
    <script  type="text/javascript" src="d3.min.js"></script>
</head>
<body>
<!--Place all DOM elements here -->
<script>
var w = 800;
var h = 450;
var margin = {
    top: 60,
    bottom: 80,
    left: 100,
    right: 80
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;

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

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

var color = d3.scale.category10();

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

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

var svg = d3.select("body").append("svg")
    .attr("id", "chart")
    .attr("width", w)
    .attr("height", h);


var chart = svg.append("g")
    .classed("display", true)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


var yGridlines = d3.svg.axis()
    .scale(y)
    .tickSize(-width,0,0)
    .tickFormat("")
    .orient("left");

var xGridlines = d3.svg.axis()
    .scale(x)
    //.tickValues(tickValues)
    .tickSize(-height,-height)
    .tickFormat("")
    .orient("bottom");

function drawAxis(params){
    if(params.initialize){
        this.append("g")
            .classed("gridline x", true)
            .attr("transform", "translate(0," + height + ")")
            .call(params.axis.gridlines.x);
        this.append("g")
            .classed("gridline y", true)
            .attr("transform", "translate(0,0)")
            .call(params.axis.gridlines.y);
        this.append("g")
            .classed("axis x", true)
            .attr("transform", "translate(0," + height + ")")
            .call(params.axis.x);
        this.append("g")
            .classed("axis y", true)
            .attr("transform", "translate(0,0)")
            .call(params.axis.y);
        this.select(".y.axis")
            .append("text")
            .classed("y axis-label", true)
            .attr("transform", "translate(" + -56 + "," + height/2 + ") rotate(-90)")
            .text("Sepal Length")
        this.select(".x.axis")
            .append("text")
            .classed("x axis-label", true)
            .attr("transform", "translate(" + width/2 + "," + 48 + ")")
            .text("Sepal Width");
        this.append("g")
            .append("text")
            .classed("chart-header", true)
            .attr("transform", "translate(0,-24)")
            .text("");
    }
}

function plot(params){
  params.data.forEach(function(d) {
    d.sepalLength = +d.sepalLength;
    d.sepalWidth = +d.sepalWidth;
  });

  x.domain(d3.extent(params.data, function(d) { return d.sepalWidth; }))
  y.domain(d3.extent(params.data, function(d) { return d.sepalLength; }))

  drawAxis.call(this, params);

  /*
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Sepal Width (cm)");

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Sepal Length (cm)")
      */

  svg.selectAll(".dot")
      .data(params.data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 5)
      .attr("cx", function(d) { return x(d.sepalWidth); })
      .attr("cy", function(d) { return y(d.sepalLength); })
      .style("fill", function(d) { return color(d.species); });

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

  legend.append("rect")
      .attr("x", width - 40)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

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


};

d3.csv("iris.csv", function(error, parsed_data) {
    plot.call(chart, {
        data: parsed_data,
        axis: {
            x: xAxis,
            y: yAxis,
            gridlines:{
                x: xGridlines,
                y: yGridlines
            }
        },
        initialize: true
    })
});

</script>
</body>
</html>

*注意：数据是我喜欢的例子。这是一个可重复性的样本：

// Data in either csv or tsv depending on preference:
sepalLength sepalWidth  petalLength petalWidth  species
5.1 3.5 1.4 0.2 setosa
4.9 3   1.4 0.2 setosa
4.7 3.2 1.3 0.2 setosa
4.6 3.1 1.5 0.2 setosa
5   3.6 1.4 0.2 setosa
6.4 3.2 4.5 1.5 versicolor
6.9 3.1 4.9 1.5 versicolor
5.5 2.3 4   1.3 versicolor
6.5 2.8 4.6 1.5 versicolor
6.5 3   5.5 1.8 virginica
7.7 3.8 6.7 2.2 virginica
7.7 2.6 6.9 2.3 virginica
6   2.2 5   1.5 virginica
6.9 3.2 5.7 2.3 virginica

翻译svg元素，使数据与轴对齐

0 个答案: