Question

我的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>

Answer 1

您正在尝试为x轴定位附加的g元素，这会产生错误，并且不执行以下代码（将绘制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);

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

工作代码（需要更多工作）here。

在d3中创建y轴的问题

1 个答案: