0

y 軸をグラフに表示するのに大きな問題があります。私はこれに関して比較的初心者であり、私のコードはおそらくいくつかの標準に達していないため、ご容赦ください。うまくいけば、あなたの何人かは、これで私を助けるという挑戦に挑戦しています. xscale を使用して x 軸がうまく機能するようになりました。追加すると、下部に表示されます。ただし、y軸は機能していません。私の人生では、y軸を表示する方法を理解できません。私は何を間違っていますか？私の xScale と yScale は最初の 2 つのスケールで、下部に軸を追加しようとしています。これについてご協力いただきありがとうございます。 

<!DOCTYPE html>
<html>
<head>
    <title> Digital Humanities Latin Graph</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
<div id="graph">
</div>

<script type="text/javascript">



        var romandataset= [ {"year": 1800, "freq": 10.45 },
                    {"year": 1850, "freq": 9.49 },
                    {"year": 1900, "freq": 7.16 },
                    {"year": 1950, "freq": 6.28 },
                    {"year": 2000, "freq": 5.25 },
                    {"year": 2008, "freq": 5.18 } ];

        var greekdataset= [     {"year": 1800, "freq": 9.1 },
                    {"year": 1850, "freq": 7.86 },
                    {"year": 1900, "freq": 7.07 },
                    {"year": 1950, "freq": 8.00 },
                    {"year": 2000, "freq": 8.43 },
                    {"year": 2008, "freq": 8.49} ];

        var padding = 200
        var w = 1100
        var h = 800




        var xScale = d3.scale.linear()
                .domain([1800, 2010])
                .range([padding, w - padding])



        var yScale = d3.scale.linear()
                .domain([5.00, 11.00])
                .range([h - padding, padding])

        var romancolorscale = d3.scale.linear()
                .domain([3.00, 11])
                .range(["white", "blue"])

        var radiusscale = d3.scale.linear()
                .domain([5.18, 10.45])
                .range([10, 20])


        var greekcolorscale = d3.scale.linear()
                .domain([3.00, 12.00])
                .range(["white", "green"])

        var xAxis = d3.svg.axis()
                .scale(xScale)
                .ticks(6);

        var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left")
                .ticks(5);


            var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

            svg.selectAll("circle") 
             .data(romandataset)                           
             .enter()
                     .append("circle")
                 .attr("cx", function (d) {return xScale(d.year) })
                     .attr("cy", function (d) {return yScale(d.freq) })
                     .attr("r", function (d) {return radiusscale(d.freq) })
                     .style("stroke", "gray")
             .style("fill", function (d) { return romancolorscale(d.freq)});


            svg.selectAll("rect")
                .data(greekdataset)
            .enter()
            .append("circle")

            .attr("cx", function (d) {return xScale(d.year) })
                    .attr("cy", function (d) {return yScale(d.freq) })
                    .attr("r", function (d) {return radiusscale(d.freq) })
                    .style("stroke", "gray")
            .style("fill", function (d) { return greekcolorscale(d.freq)});

            svg.append("g")
            .attr("transform", "translate(0," + (h - padding) + ")")
            .call(xAxis)
            .orient[("bottom")];

            svg.append("g")
                .attr("class", "axis")
             .attr("transform", "translate(" + padding + ",0)")
                 .call(yAxis);



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

1 に答える 1