0

我在让我的 y 轴出现在我的图表上时遇到了一些重大困难。您必须原谅我，因为我是这方面的初学者，而且我的代码可能达不到某些标准。希望你们中的一些人能够迎接挑战，帮助我解决这个问题。我已经让 x 轴与我的 xscale 一起工作得很好，当我附加它时，我会在底部看到它。虽然 y 轴不起作用，但我一生都无法弄清楚如何让我的 y 轴出现。我究竟做错了什么？我的 xScale 和 yScale 是前两个比例，我尝试在底部附加轴。提前感谢您对此的任何帮助。 

<!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

0

您正在尝试g为 x 轴定向附加元素，这会产生错误，并且不会执行以下代码（将绘制 y 轴）。

只需删除最后一行

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

并将其放在定义轴的位置：

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

（你也不需要它周围的方括号。）

工作代码（需要更多工作）在这里。

于 2013-09-24T19:14:15.020 回答