d3 v4的散點圖未顯示Y軸

Question

我正在嘗試使用d3.js（v4）創建散點圖。 我是d3的新手，由於v4示例的文檔有限，因此我正努力創建繪圖（之前已經在這里提出過要求）。 我的代碼如下：

const margin = { top: 100, right: 50, left: 50, bottom: 50};
const width = 1300 - margin.right - margin.left;
const height = 1250 - margin.top - margin.bottom;

d3.csv("http://localhost:9000/data.csv", (error, data) => {
    if (error) throw error;

    const x = (d) => d["Category"];

    const xScale = d3.scalePoint()
                     .domain(data.map((d) => d["Category"]))
                     .range([0, width]);
    const xMap = (d) => xScale(x(d));

    const xAxis = d3.axisBottom().scale(xScale);

    // Plotting Score 1 for now
    const y = (d) => d["Score 1"];
    const yScale = d3.scaleLinear()
                     .domain([0, d3.max(data, y)])
                     .range([height, 0]);

    const yMap = (d) => yScale(y(d))

    const yAxis = d3.axisLeft().scale(yScale);

    const svg = d3.select('body')
                  .append('svg')
                  .attr('width', width)
                  .attr('height', height)
                  .append('g')
                  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


    svg.append('g')
       .attr('class', 'axis axis--x')
       .call(xAxis)
       .attr('transform', 'translate(0, 800)')
       .append('text')
       .attr('class', 'label')
       .attr('x', width)
       .attr('y', -6)
       .style('text-anchor', 'middle')
       .text('Category');

    svg.append('g')
       .attr('class', 'axis axis--y')
       .call(yAxis)
       .attr('transform', 'rotate(-90)')
       .attr('y', 0 - margin.left)
       .attr('x', 0 - (height/2))
       .attr("dy", "1em")
       .style('text-anchor', 'middle')
       .text('Score');

    svg.selectAll('circle')
       .data(data)
       .enter()
       .append('circle')
       .attr('class', 'dot')
       .attr('cx', xMap)
       .attr('cy', yMap)
       .attr('r', 3.5)
       .attr('fill', 'red');
});

給出了data.csv的幾行：

Name,Category,Score 1,Score 2,Score 3,Average score
A1_P1,A01,2.3,2.4,4.1,2.4
A2_P1,A02,1.4,1.5,2.4,1.5
A3_P1,A03,0.9,0.9,0.9,0.9
A4_P1,B01,1.5,1.5,1,1.5
A5_P1,B02,1.2,1.2,1.4,1.2
A6_P1,B03,1,1,1.1,1
A7_P1,C01,1.6,1.2,1,1.2
A8_P1,C02,1.2,1.2,0.9,1.2
A9_P1,C03,1.1,1.1,1,1.1
A10_P1,D01,1.5,1.6,1.1,1.5

x軸顯示了（但沒有'Category'標簽），更重要的是，y軸根本沒有顯示。 但是，這些點本身已正確顯示。 有人知道我的y軸設置和軸標簽出了什么問題嗎？ 提前致謝！

Answer 1

當我使用d3啟動新圖表時，我發現最好從一個已知的簡單設置示例開始，以放置我的圖形g ，軸等。這是我通常的起點。

也就是說，這是我在圖表中看到的問題列表：

沒有動態放置X軸。
svg容器的尺寸錯誤，並最終位於軸的頂部。
嘗試將text軸標簽附加到y軸，但是您實際上從未附加文本（然后將屬性和樣式應用於軸本身，而不是缺少的文本元素）。

全部清理如下：

 <!DOCTYPE html> <html> <head> <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <script> const margin = { top: 100, right: 50, left: 50, bottom: 50 }; const width = 500 - margin.right - margin.left; const height = 500 - margin.top - margin.bottom; //d3.csv("data.csv", (error, data) => { // if (error) throw error; var data = [{"Name":"A1_P1","Category":"A01","Score 1":"2.3","Score 2":"2.4","Score 3":"4.1","Average score":"2.4"},{"Name":"A2_P1","Category":"A02","Score 1":"1.4","Score 2":"1.5","Score 3":"2.4","Average score":"1.5"},{"Name":"A3_P1","Category":"A03","Score 1":"0.9","Score 2":"0.9","Score 3":"0.9","Average score":"0.9"},{"Name":"A4_P1","Category":"B01","Score 1":"1.5","Score 2":"1.5","Score 3":"1","Average score":"1.5"},{"Name":"A5_P1","Category":"B02","Score 1":"1.2","Score 2":"1.2","Score 3":"1.4","Average score":"1.2"},{"Name":"A6_P1","Category":"B03","Score 1":"1","Score 2":"1","Score 3":"1.1","Average score":"1"},{"Name":"A7_P1","Category":"C01","Score 1":"1.6","Score 2":"1.2","Score 3":"1","Average score":"1.2"},{"Name":"A8_P1","Category":"C02","Score 1":"1.2","Score 2":"1.2","Score 3":"0.9","Average score":"1.2"},{"Name":"A9_P1","Category":"C03","Score 1":"1.1","Score 2":"1.1","Score 3":"1","Average score":"1.1"},{"Name":"A10_P1","Category":"D01","Score 1":"1.5","Score 2":"1.6","Score 3":"1.1","Average score":"1.5"}]; const x = (d) => d["Category"]; const xScale = d3.scalePoint() .domain(data.map((d) => d["Category"])) .range([0, width]); const xMap = (d) => xScale(x(d)); const xAxis = d3.axisBottom().scale(xScale); // Plotting Score 1 for now const y = (d) => d["Score 1"]; const yScale = d3.scaleLinear() .domain([0, d3.max(data, y)]) .range([height, 0]); const yMap = (d) => yScale(y(d)) const yAxis = d3.axisLeft().scale(yScale); const svg = d3.select('body') .append('svg') .attr('width', width + margin.right + margin.left) .attr('height', height + margin.top + margin.bottom) .append('g') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); svg.append('g') .attr('class', 'axis axis--x') .call(xAxis) .attr('transform', 'translate(0,' + height + ')') .append('text') .attr('class', 'label') .attr('x', width) .attr('y', -6) .style('text-anchor', 'middle') .text('Category'); svg.append('g') .attr('class', 'axis axis--y') .call(yAxis) .append("text") .attr('transform', 'rotate(-90)') .attr('y', 0 - margin.left) .attr('x', 0 - (height / 2)) .attr("dy", "1em") .style('text-anchor', 'middle') .text('Score') .style('fill', 'black') svg.selectAll('circle') .data(data) .enter() .append('circle') .attr('class', 'dot') .attr('cx', xMap) .attr('cy', yMap) .attr('r', 3.5) .attr('fill', 'red'); //}); </script> </body> </html>

d3 v4的散點圖未顯示Y軸

問題描述

1 個解決方案

解決方案1
1 已采納 2017-01-26 14:21:21

d3 v4的散點圖未顯示Y軸

問題描述

1 個解決方案

解決方案1 1 已采納 2017-01-26 14:21:21

解決方案1
1 已采納 2017-01-26 14:21:21