0

d3.js以下のスクリプトの実際の例を参照してください。垂直線mline1は、のx軸値にあり16000ます。傾斜した線dlineは、方程式を表すことになっています x = 48000 - 16000*y。との交差はmline1、dlineの値で発生する必要がありますx=16000 and y=2。を中心に円を描きx=16000 and y=2ますが、上の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していませんx = 48000 - 16000y; その場合は、4（）ではなく316 * 4 = 64の値でy軸と交差する必要があります。

で開始するか、サークルをでdline開始する必要があります。y = 3y =~ 2.67

あなたはここであなた自身のために見ることができます。

于 2012-05-14T12:31:37.817 に答える