Question

我正在尝试使用D3绘制一条线，但是线条数据只出现在左上角，请你帮忙找一下为什么线不能适合轴？

        var margin = { top: 20, right: 30, bottom: 30, left: 40 },
            width = 680 - margin.left - margin.right,
            height = 600 - margin.top - margin.bottom;

        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.ordinal()
            .rangeRoundBands([0, width], .1)
            .domain(lineData.map(function (d) { return d.x; }));

        var y = d3.scale.linear()
            .range([height, 0])
            .domain([0, d3.max(lineData, function (d) { return d.y; })]);

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

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

        var svgContainer = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

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

        var lineGraph = svgContainer.append("path")
            .attr("d", lineFunction(lineData))
            .attr("stroke", "blue")
            .attr("stroke-width", 2)
            .attr("fill", "none");

        svgContainer.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        svgContainer.append("g")
            .attr("class", "y axis")
            .call(yAxis);

Answer 1

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

您需要将创建的比例应用于线函数。

如何让线条适合轴线

1 个答案: