Fatal编程技术网
  • d3.js/
  • D3.js 在d3中创建y轴的问题

D3.js 在d3中创建y轴的问题

d3.js

D3.js 在d3中创建y轴的问题,d3.js,scale,axis,D3.js,Scale,Axis,我在使y轴出现在图表上时遇到了一些重大困难。你必须原谅我，因为我是一个相对初学者，我的代码可能不符合标准。希望你们中的一些人能够接受挑战，帮助我解决这个问题。我已经用xscale计算出了x轴，当我附加它时，我在底部看到它。虽然y轴不工作，但我一辈子都不知道如何让y轴出现。我做错了什么？我的xScale和yScale是前两个刻度，我尝试在底部附加轴。提前感谢您在这方面的帮助 <!DOCTYPE html> <html> <head> <title&

我在使y轴出现在图表上时遇到了一些重大困难。你必须原谅我，因为我是一个相对初学者，我的代码可能不符合标准。希望你们中的一些人能够接受挑战，帮助我解决这个问题。我已经用xscale计算出了x轴，当我附加它时，我在底部看到它。虽然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>


数字人文拉丁图
var romandataset=[{“年”：1800，“频率”：10.45}，
{“年”：1850，“频率”：9.49}，
{“年份”：1900，“频率”：7.16}，
{“年份”：1950，“频率”：6.28}，
{“年份”：2000，“频率”：5.25}，
{“年”：2008，“频率”：5.18}]；
var greekdataset=[{“年”：1800，“频率”：9.1}，
{“年”：1850，“频率”：7.86}，
{“年份”：1900，“频率”：7.07}，
{“年份”：1950，“频率”：8.00}，
{“年份”：2000，“频率”：8.43}，
{“年”：2008，“频率”：8.49}]；
var填充=200
var w=1100
var h=800
var xScale=d3.scale.linear（）
.domain（[18002010]）
.范围（[填充，w-填充]）
var yScale=d3.scale.linear（）
.域名（[5.00,11.00]）
.范围（[h-填充，填充]）
var romancolorscale=d3.scale.linear（）
.domain（[3.00,11]）
.范围（[“白色”、“蓝色”]）
var radiuscale=d3.scale.linear（）
.域名（[5.18,10.45]）
.范围（[10,20]）
var greekcolorscale=d3.scale.linear（）
.域名（[3.00,12.00]）
.范围（[“白色”、“绿色”]）
var xAxis=d3.svg.axis（）
.scale（xScale）
.蜱（6）；
var yAxis=d3.svg.axis（）
.刻度（yScale）
.东方（“左”）
.蜱（5）；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
svg.selectAll（“圆圈”）
.数据（romandataset）
.输入（）
.附加（“圆圈”）
.attr（“cx”，函数（d）{return xScale（d.year）}）
.attr（“cy”，函数（d）{return yScale（d.freq）}）
.attr（“r”，函数（d）{返回半径刻度（d.freq）}）
.style（“笔划”、“灰色”）
.style（“fill”，函数（d）{return romancolorscale（d.freq）}）；
svg.selectAll（“rect”）
.数据（greekdataset）
.输入（）
.附加（“圆圈”）
.attr（“cx”，函数（d）{return xScale（d.year）}）
.attr（“cy”，函数（d）{return yScale（d.freq）}）
.attr（“r”，函数（d）{返回半径刻度（d.freq）}）
.style（“笔划”、“灰色”）
.style（“fill”，函数（d）{return greekcolorscale（d.freq）}）；
svg.append（“g”）
.attr（“变换”、“平移（0）”+（h-填充）+”）
.呼叫（xAxis）
.定向[（“底部”）]；
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“转换”、“转换”（+padding+”，0）”）
.呼叫（yAxis）；
您正在尝试将附加的
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);
（您也不需要在其周围使用方括号。）

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

Lars：这非常有帮助，谢谢。你在这里帮助了像我这样的人，真是帮了大忙。请继续努力。