Question

我最近开始使用d3，我似乎遇到了一个错误。当我运行我的代码时，我得到了这些结果：

Error: Invalid value for <path> attribute d="MNaN,NaNLNaN,NaNCNaN,NaN,NaN,NaN,NaN,NaNCNaN,NaN,NaN,NaN,NaN,NaNCNaN,NaN,NaN,NaN,NaN,NaNCNaN,NaN,NaN,NaN,NaN,NaNCNaN,NaN,NaN,NaN,NaN,NaNLNaN,NaN"

这是我的代码：

            <head>
                <title>Compression</title>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"></script>
                <style>
                    .axis path,
                    .axis line {
                        fill: none;
                        stroke: #777;
                        shape-rendering: crispEdges;
                    }

                    .axis text {
                        font-family: 'Arial';
                        font-size: 13px;
                    }

                    .tick {
                        stroke-dasharray: 1, 2;
                    }

                    .bar {
                        fill: FireBrick;
                    }

                </style>
            </head>

            <body>

                <input type="range" id="myRange" value="50" step="2.5">



                <p id="demo"></p>
                <br>
                <br>
                <svg id="visual" width="1000" height="500"></svg>

                <script>
                    var slider = $("#myRange").val();;
                    var xtwo;
                    var xone;
                    var xzero;
                    var firstx = -1;
                    var firsty = 1;
                    var secondx = 2;
                    var secondy = 4;
                    var lineData = [];

                    //updates coefficients
                    function updateXs() {
                        xtwo = (75 - slider) / 50;
                        xone = (slider - 25) / 50;
                        xzero = (slider - 25) / 25;
                    }

                    //gets corresponding y from x and coefficients
                    function getY(xval) {
                        return (xval * xval * xtwo + xval * xone + xzero);
                    }

                    function displayVals() {
                        document.getElementById("demo").innerHTML = slider + " " + xtwo + " " + xone + " " + xzero + "   " + lineData;
                    }

                    function updateLineData() {
                        //resets and fills points
                        lineData = [];
                        for (i = (firstx - 1); i < (secondx + 2); i++) {
                            lineData.push({
                                x: "i",
                                y: "getY(i)"
                            });
                        }

                    }

                    $(document).ready(function() {
                        updateXs();
                        updateLineData();
                        displayVals();



                        var vis = d3.select('#visual'),
                            WIDTH = 1000,
                            HEIGHT = 500,
                            MARGINS = {
                                top: 20,
                                right: 20,
                                bottom: 20,
                                left: 50
                            },
                            xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function(d) {
                                return d.x;
                            }), d3.max(lineData, function(d) {
                                return d.x;
                            })]),
                            yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function(d) {
                                return d.y;
                            }), d3.max(lineData, function(d) {
                                return d.y;
                            })]),
                            xAxis = d3.svg.axis()
                            .scale(xRange)
                            .tickSize(5)
                            .tickSubdivide(true),
                            yAxis = d3.svg.axis()
                            .scale(yRange)
                            .tickSize(5)
                            .orient("left")
                            .tickSubdivide(true);


                        vis.append("svg:g")
                            .attr("class", "x axis")
                            .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
                            .call(xAxis);

                        vis.append("svg:g")
                            .attr("class", "y axis")
                            .attr("transform", "translate(" + (MARGINS.left) + ",0)")
                            .call(yAxis);

                        var lineFunc = d3.svg.line()
                            .x(function(d) {
                                return xRange(d.x);
                            })
                            .y(function(d) {
                                return yRange(d.y);
                            })
                            .interpolate('basis');

                        vis.append("svg:path")
                            .attr("d", lineFunc(lineData))
                            .attr("stroke", "blue")
                            .attr("stroke-width", 2)
                            .attr("fill", "none");

                        //updates when slider changes
                        $("#myRange").change(function() {
                            slider = $("#myRange").val();

                            updateXs();
                            updateLineData();
                            displayVals();
                        });


                    });

                </script>

            </body>

            </html>

这个想法是它应该是一个随滑块变化的图形。滑块应该改变二次方程，同时确保它通过两个特定点。但我在图表中看不到任何刻度线或任何线条。

Answer 1

实际上，事实证明这是因为引用：

for (i = (firstx - 1); i < (secondx + 2); i++) {
                        lineData.push({
                            x: "i",
                            y: "getY(i)"
                        });
                    }

d3库出错？

1 个答案: