0

请参阅d3.js下面的脚本工作示例。垂直线mline1位于 的 x 轴值处16000。向下倾斜的线dline应该代表方程 x = 48000 - 16000*y。mline1和的交集dline应该出现在 的值处x=16000 and y=2。我画了一个以 为中心的圆x=16000 and y=2，我希望它位于上面两条线的交点处。但事实并非如此。如果您能帮助我理解这一点，或者让我知道这是 d3.js 缩放行为中的错误还是其他错误，我将不胜感激。

提前致谢。

编码

<html>
<head>
      <script src="http://d3js.org/d3.v2.js"></script>
</head>
<body>
    <div id="viz"></div>
    <script type="text/javascript">
        var paddingH = 50;
        var paddingV = 50;
        var width = 700;
        var height = 400

        cv = d3.select("#viz").append("svg:svg")
                .attr("width", width)
                .attr("height", height)

        var xs = d3.scale.linear()
                            .domain([0,50000])
                            .range([paddingH,width-paddingH]);

        var ys = d3.scale.linear()
                            .domain([0,5.5])
                            .range([height-paddingV,paddingV]);                                                                                     
        xline = cv.append("svg:line")
                    .attr("x1", xs(0))
                    .attr("x2", xs(50000))
                    .attr("y1", ys(0))
                    .attr("y2", ys(0))
                    .style("stroke", "darkgray");

        yline = cv.append("svg:line")
            .attr("x1", xs(0))
            .attr("x2", xs(0))
            .attr("y1", ys(0))
            .attr("y2", ys(5))
            .style("stroke", "darkgray");



        dline = cv.append("svg:line")
            .attr("x1", xs(0))
            .attr("y1", ys(4))
            .attr("x2", xs(48000))
            .attr("y2", ys(0))
            .style("stroke", "steelblue")
            .style("stroke-width", 2);


        mline1 = cv.append("svg:line")
            .attr("x1", xs(16000))
            .attr("y1", ys(0))
            .attr("x2", xs(16000))
            .attr("y2", ys(5))
            .style("stroke", "green");


        circleIntersect = cv.append("svg:circle")
                            .attr("cx", xs(16000))
                            .attr("cy", ys(2))
                            .attr("r",4)
                            .style("stroke", "red")
                            .style("fill", "red");


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

1 回答 1

1

您dline不代表；_ _ 如果是这种情况，它应该以3x = 48000 - 16000y的值穿过 y 轴，而不是 4 ( )。16 * 4 = 64

您dline应该从 开始y = 3，或者您的圈子应该在y =~ 2.67。

你可以在这里亲眼看看。

于 2012-05-14T12:31:37.817 回答