Question

我的代码存在问题，我创建的圆形节点似乎没有附加到图形中。调试器没有提取任何错误，所以看起来这是一个逻辑问题。这是看起来像：

(dot)
|
|
|
|
|
|       <--(where dot should be)
|
 __________________________________________
               ^
               |
             graph

这是我的代码：

<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 = [];
                        var nodes = [];

                        //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)
                                });
                            }

                        }
                        //makes dots for static points
                        function makeDots(xvalue, xvalue2) {
                            nodes = [{
                                x: xvalue,
                                y: getY(xvalue)
                            }, {
                                x: xvalue2,
                                y: getY(xvalue2)
                            }]

                        }

                        function makeLine() {}

                        $(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");

                            makeDots(firstx, secondx);




                            //puts in dots
                              vis.selectAll("circle.nodes")
                                .data(nodes)
                                .enter()
                                .append("circle")
                                .attr("cx", function(d) {
                                    console.log(d.x)
                                    return 200;
                                })
                                .attr("cy", function(d) {
                                    return d.y;
                                })
                                .attr("r", "10px")
                                .attr("fill", "black")

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

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


                        });

                    </script>

请提前帮助和感谢。另外，我想知道是否可以使用.change函数

获得有关如何使线移动的一些提示

Answer 1

您尚未将缩放功能应用于您的点：

vis.selectAll(".nodes")
  .data(nodes)
  .enter().append("circle")
  .attr("class", "nodes")
  .attr("cx", function (d) {
    return xRange(d.x); //<-- convert from user space to pixel space
  })
  .attr("cy", function (d) {
    return yRange(d.y); //<-- convert from user space to pixel space
  });

要更新线路，您需要选择它并更改d属性：

d3.select(".myLine") //<-- select it by some unique class
  .attr("d", lineFunc(lineData)); //<-- update the d attribute

要获得没有插值的平滑曲线，只需提供更多点。见udpated小提琴。

小提琴here。

点不附加到右图？

1 个答案: