Question

所以我正在做这个任务，要求我绘制1897-2017年最佳波士顿马拉松选手的时间。必须绘制的数据是x轴上的年份和y轴上的时间（以分钟为单位）。我有一个数组中的数据，我试图在svg中绘制它们，但由于某种原因，绘图和x轴被推到y轴的右边。只有将宽度增加到年份的最大值才能看到它们。

        var h = 500;
        var w = 2018;
        var padding = 30;

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


        var xScale = d3.scaleLinear()
                        .domain([d3.min(dataset, function(d){ return d[0]; }), 
                            d3.max(dataset, function(d){ return d[0]; })])
                        .range([d3.min(dataset, function(d){ return d[0]; }), w]);

        var yScale = d3.scaleLinear()
                        .domain([d3.min(dataset, function(d){ return d[1]; }), 
                            d3.max(dataset, function(d){ return d[1]; })])
                        .range([h, d3.min(dataset, function(d){ return d[1]; })]);


        svg.selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle")
        .attr("cx", function(d){
            return xScale(d[0]);
        })
        .attr("cy", function(d){
            return yScale(d[1]);
        })
        .attr("r", 5);

        var xAxis = d3.axisBottom()
                        .scale(xScale)
                        .ticks(5);

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

        var yAxis = d3.axisLeft()
                        .scale(yScale)
                        .ticks(5);

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

我正在使用这些数据，我知道将它放在数组中而不是csv或其他东西有点极端。

[
                        [1897,175],
                        [1898,162],
                        [1899,174],
                        [1900,159],
                        [1901,149],
                        [1902,163],
                        [1903,161],
                        [1904,158],
                        [1905,158],
                        [1906,165],
                        [1907,144],
                        [1908,145],
                        [1909,173],
                        [1910,148],
                        [1911,141],
                        [1912,141],
                        [1913,145],
                        [1914,145],
                        [1915,151],
                        [1916,147],
                        [1917,148],
                        [1918,149],
                        [1919,149],
                        [1920,149],
                        [1921,138],
                        [1922,138],
                        [1923,143],
                        [1924,149],
                        [1925,153],
                        [1926,145],
                        [1927,160],
                        [1928,157],
                        [1929,153],
                        [1930,154],
                        [1931,166],
                        [1932,153],
                        [1933,151],
                        [1934,152],
                        [1935,152],
                        [1936,153],
                        [1937,153],
                        [1938,155],
                        [1939,148],
                        [1940,148],
                        [1941,150],
                        [1942,146],
                        [1943,148],
                        [1944,151],
                        [1945,150],
                        [1946,149],
                        [1947,145],
                        [1948,151],
                        [1949,151],
                        [1950,152],
                        [1951,147],
                        [1952,151],
                        [1953,138],
                        [1954,140],
                        [1955,138],
                        [1956,134],
                        [1957,140],
                        [1958,145],
                        [1959,142],
                        [1960,140],
                        [1961,143],
                        [1962,143],
                        [1963,138],
                        [1964,139],
                        [1965,136],
                        [1966,137],
                        [1967,135],
                        [1968,142],
                        [1969,133],
                        [1970,130],
                        [1971,138],
                        [1972,135],
                        [1973,136],
                        [1974,133],
                        [1975,129],
                        [1976,140],
                        [1977,134],
                        [1978,130],
                        [1979,129],
                        [1980,132],
                        [1981,129],
                        [1982,128],
                        [1983,129],
                        [1984,130],
                        [1985,134],
                        [1986,127],
                        [1987,131],
                        [1988,128],
                        [1989,129],
                        [1990,128],
                        [1991,131],
                        [1992,128],
                        [1993,129],
                        [1994,127],
                        [1995,129],
                        [1996,129],
                        [1997,130],
                        [1998,127],
                        [1999,129],
                        [2000,129],
                        [2001,129],
                        [2002,129],
                        [2003,130],
                        [2004,130],
                        [2005,131],
                        [2006,127],
                        [2007,134],
                        [2008,127],
                        [2009,128],
                        [2010,125],
                        [2011,123],
                        [2012,132],
                        [2013,130],
                        [2014,128],
                        [2015,129],
                        [2016,132],
                        [2017,129]
                    ];

我得到的问题如图所示。

我做错了什么？

Answer 1

您的代码中对domain和range存在根本性的误解。

对于初学者，您可以将SVG的宽度设置为2018。这很奇怪，特别是因为数据集中的去年是2017。你真的想要一个2018像素的SVG吗？我不这么认为。

D3比例中的range是指输出。因此，您应该设置指定＆＃34的范围;我希望在SVG坐标系统（或该SVG内的组）中的初始值和最终值是什么？＆＃34; 。

话虽如此，这些可能是范围：

xScale.range([padding, w - padding]);
yScale.range([h - padding, padding]);

这是您的代码，包含这2个更改（我将宽度设置为800像素）：

＆＃13;

var dataset = [
  [1897, 175],
  [1898, 162],
  [1899, 174],
  [1900, 159],
  [1901, 149],
  [1902, 163],
  [1903, 161],
  [1904, 158],
  [1905, 158],
  [1906, 165],
  [1907, 144],
  [1908, 145],
  [1909, 173],
  [1910, 148],
  [1911, 141],
  [1912, 141],
  [1913, 145],
  [1914, 145],
  [1915, 151],
  [1916, 147],
  [1917, 148],
  [1918, 149],
  [1919, 149],
  [1920, 149],
  [1921, 138],
  [1922, 138],
  [1923, 143],
  [1924, 149],
  [1925, 153],
  [1926, 145],
  [1927, 160],
  [1928, 157],
  [1929, 153],
  [1930, 154],
  [1931, 166],
  [1932, 153],
  [1933, 151],
  [1934, 152],
  [1935, 152],
  [1936, 153],
  [1937, 153],
  [1938, 155],
  [1939, 148],
  [1940, 148],
  [1941, 150],
  [1942, 146],
  [1943, 148],
  [1944, 151],
  [1945, 150],
  [1946, 149],
  [1947, 145],
  [1948, 151],
  [1949, 151],
  [1950, 152],
  [1951, 147],
  [1952, 151],
  [1953, 138],
  [1954, 140],
  [1955, 138],
  [1956, 134],
  [1957, 140],
  [1958, 145],
  [1959, 142],
  [1960, 140],
  [1961, 143],
  [1962, 143],
  [1963, 138],
  [1964, 139],
  [1965, 136],
  [1966, 137],
  [1967, 135],
  [1968, 142],
  [1969, 133],
  [1970, 130],
  [1971, 138],
  [1972, 135],
  [1973, 136],
  [1974, 133],
  [1975, 129],
  [1976, 140],
  [1977, 134],
  [1978, 130],
  [1979, 129],
  [1980, 132],
  [1981, 129],
  [1982, 128],
  [1983, 129],
  [1984, 130],
  [1985, 134],
  [1986, 127],
  [1987, 131],
  [1988, 128],
  [1989, 129],
  [1990, 128],
  [1991, 131],
  [1992, 128],
  [1993, 129],
  [1994, 127],
  [1995, 129],
  [1996, 129],
  [1997, 130],
  [1998, 127],
  [1999, 129],
  [2000, 129],
  [2001, 129],
  [2002, 129],
  [2003, 130],
  [2004, 130],
  [2005, 131],
  [2006, 127],
  [2007, 134],
  [2008, 127],
  [2009, 128],
  [2010, 125],
  [2011, 123],
  [2012, 132],
  [2013, 130],
  [2014, 128],
  [2015, 129],
  [2016, 132],
  [2017, 129]
];

var h = 500;
var w = 800;
var padding = 30;

var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);


var xScale = d3.scaleLinear()
  .domain([d3.min(dataset, function(d) {
      return d[0];
    }),
    d3.max(dataset, function(d) {
      return d[0];
    })
  ])
  .range([padding, w - padding]);

var yScale = d3.scaleLinear()
  .domain([d3.min(dataset, function(d) {
      return d[1];
    }),
    d3.max(dataset, function(d) {
      return d[1];
    })
  ])
  .range([h - padding, padding]);


svg.selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle")
  .attr("cx", function(d) {
    return xScale(d[0]);
  })
  .attr("cy", function(d) {
    return yScale(d[1]);
  })
  .attr("r", 5);

var xAxis = d3.axisBottom()
  .scale(xScale)
  .ticks(5);

svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + (h - padding) + ")")
  .call(xAxis);

var yAxis = d3.axisLeft()
  .scale(yScale)
  .ticks(5);

svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(" + padding + ", 0)")
  .call(yAxis);

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

D3分散图出错

1 个答案: