Question

我试图学习d3，并且在将数据与轴匹配方面遇到了一些麻烦。

结帐此代码段。

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>

        body {
            font: 10px sans-serif;
            margin: 30px;
        }

        path.line {
            fill: none;
            stroke: #666;
            stroke-width: 1.5px;
        }


        .axis {
            shape-rendering: crispEdges;
        }


        .x.axis path {
            fill: none;
            stroke: #000;
        }

        .y.axis line, .y.axis path {
            fill: none;
            stroke: #000;
        }



    </style>
    <svg class="chart"></svg>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

        var margin = {top: 80, right: 80, bottom: 80, left: 80},
                width = 950 - margin.left - margin.right,
                height = 500 - margin.top - margin.bottom;

        //The data for our line
        var lineData = [{"x": 1, "y": 5}, {"x": 20, "y": 20},
            {"x": 40, "y": 10}, {"x": 60, "y": 40},
            {"x": 80, "y": 5}, {"x": 100, "y": 60}];

        var x = d3.scale.linear().range([0, width]),
        y = d3.scale.linear().range([height,0]),
        xAxis = d3.svg.axis().scale(x),
        yAxis = d3.svg.axis().scale(y).orient("left");

        x.domain([0,100]);
        y.domain([0,100]);

        //This is the accessor function we talked about above
        var lineFunction = d3.svg.line()
                .x(function (d) {
                    return d.x;
                })
                .y(function (d) {
                    return d.y;
                })
                .interpolate("monotone");

        //The SVG Container
        var svgContainer = d3.select("body").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom);

        //The line SVG Path we draw
        var lineGraph = svgContainer.append("path")
                .attr("d", lineFunction(lineData))
                .attr("stroke", "blue")
                .attr("stroke-width", 2)
                .attr("fill", "none")
                .attr("class","path");


        // Add the x-axis.
        svgContainer.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

        // Add the y-axis.
        svgContainer.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + width + ",0)")
                .call(yAxis);


    </script>
</head>
<body>

</body>
</html>

＆＃13;

轴编号看起来没问题，但这些点不匹配。

这段代码有什么问题？

Answer 1

您设置了刻度x和y并将它们分配给您的轴，但您错过了在您的访问器功能中指定它们。由于您的数据点应按照与轴相同的方式进行缩放，因此您需要使用它们：

var lineFunction = d3.svg.line()
        .x(function (d) {
            return x(d.x);
        })
        .y(function (d) {
            return y(d.y);
        })
        .interpolate("monotone");

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>

        body {
            font: 10px sans-serif;
            margin: 30px;
        }

        path.line {
            fill: none;
            stroke: #666;
            stroke-width: 1.5px;
        }


        .axis {
            shape-rendering: crispEdges;
        }


        .x.axis path {
            fill: none;
            stroke: #000;
        }

        .y.axis line, .y.axis path {
            fill: none;
            stroke: #000;
        }



    </style>
    <svg class="chart"></svg>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

        var margin = {top: 80, right: 80, bottom: 80, left: 80},
                width = 950 - margin.left - margin.right,
                height = 500 - margin.top - margin.bottom;

        //The data for our line
        var lineData = [{"x": 1, "y": 5}, {"x": 20, "y": 20},
            {"x": 40, "y": 10}, {"x": 60, "y": 40},
            {"x": 80, "y": 5}, {"x": 100, "y": 60}];

        var x = d3.scale.linear().range([0, width]),
        y = d3.scale.linear().range([height,0]),
        xAxis = d3.svg.axis().scale(x),
        yAxis = d3.svg.axis().scale(y).orient("left");

        x.domain([0,100]);
        y.domain([0,100]);

        //This is the accessor function we talked about above
        var lineFunction = d3.svg.line()
                .x(function (d) {
                    return x(d.x);
                })
                .y(function (d) {
                    return y(d.y);
                })
                .interpolate("monotone");

        //The SVG Container
        var svgContainer = d3.select("body").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom);

        //The line SVG Path we draw
        var lineGraph = svgContainer.append("path")
                .attr("d", lineFunction(lineData))
                .attr("stroke", "blue")
                .attr("stroke-width", 2)
                .attr("fill", "none")
                .attr("class","path");


        // Add the x-axis.
        svgContainer.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

        // Add the y-axis.
        svgContainer.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + width + ",0)")
                .call(yAxis);


    </script>
</head>
<body>

</body>
</html>

d3 js轴与实际数据

1 个答案: