scaleBand 軸中的數據點和刻度未對齊

Question

我的數據點和 scaleBand y 軸中的值未對齊。 我無法正確對齊它們，當我閱讀文檔時，看到默認情況下對齊是 0.5，這就是為什么我的數據點繪制在軸上的兩個點之間。 但是我試圖覆蓋我將對齊設置為 0 的對齊方式，但似乎沒有任何變化。

以下是我的代碼。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>D3 v4 - linechart</title>
<style>
#graph {
    width: 900px;
    height: 500px;
}
.tick line {
    stroke-dasharray: 2 2 ;
    stroke: #ccc;
}


.y path{
    fill: none;
  stroke: none;
}

</style>
</head>

<body>
<div id="graph"></div>    



<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>    
<script>
!(function(){
    "use strict"

    var width,height
    var chartWidth, chartHeight
    var margin
    var svg = d3.select("#graph").append("svg")
    var axisLayer = svg.append("g").classed("axisLayer", true)
    var chartLayer = svg.append("g").classed("chartLayer", true)

    var xScale = d3.scaleLinear()
    var yScale = d3.scaleBand()
    var align = 0


    //d3.tsv("data1.tsv", cast,  main)
    d3.json("http://localhost/d32.json",cast)

    //データの方変換
    function cast(data) {
        console.log("got it");
        data.forEach(function(data) {
        console.log(data.Letter);
        data.Letter = data.Letter;
        data.Freq = +data.Freq;
    });
        main(data);
    }

    function main(data) {
        console.log("in main");
        setSize(data)
        drawAxis()
        drawChart(data)    
    }

    function setSize(data) {
        width = document.querySelector("#graph").clientWidth
        height = document.querySelector("#graph").clientHeight

        margin = {top:40, left:100, bottom:40, right:0 }


        chartWidth = width - (margin.left+margin.right+8)
        chartHeight = height - (margin.top+margin.bottom)

        svg.attr("width", width).attr("height", height)

        axisLayer.attr("width", width).attr("height", height)

        chartLayer
            .attr("width", chartWidth)
            .attr("height", chartHeight)
            .attr("transform", "translate("+[margin.left, margin.top]+")")


        xScale.domain([0, d3.max(data, function(d) { return d.Freq; })]).range([0,chartWidth])
        yScale.domain(data.map(function(d) { return d.Letter; })).range([chartHeight, 0]).align(1)

    }

    function drawChart(data) {

    console.log("in drawChart");
        var t = d3.transition()
            .duration(8000)
            .ease(d3.easeLinear)
            .on("start", function(d){ console.log("transiton start") })
            .on("end", function(d){ console.log("transiton end") })


        var lineGen = d3.line()
            .x(function(d) { return xScale(d.Freq) })
            .y(function(d) { return yScale(d.Letter)  })
            .curve(d3.curveStepAfter)

        var line = chartLayer.selectAll(".line")
            .data([data])

        line.enter().append("path").classed("line", true)
            .merge(line)
            .attr("d", lineGen)
            .attr("fill", "none")
            .attr("stroke", "blue")
            .attr("stroke-width","2px")
            .attr("stroke-dasharray", function(d){ return this.getTotalLength() })
            .attr("stroke-dashoffset", function(d){ return this.getTotalLength() })

        chartLayer.selectAll(".line").transition(t)
            .attr("stroke-dashoffset", 0)



    chartLayer.selectAll("circle").classed("circle",true)
    .data(data)
    .enter().append("circle")
    .attr("class", "circle")
    .attr("fill","none")
    .attr("stroke","black")
    .attr("cx", function(d) { return xScale(d.Freq); })
    .attr("cy", function(d) { return yScale(d.Letter); })
    .attr("r", 4);

    chartLayer.selectAll(".logo").transition(t)
        .attr("stroke-dashoffset", 0)


    }

    function drawAxis(){
        var yAxis = d3.axisLeft(yScale)
            .tickSizeInner(-chartWidth)

        axisLayer.append("g")
            .attr("transform", "translate("+[margin.left, margin.top]+")")
            .attr("class", "axis y")
            .call(yAxis);

        var xAxis = d3.axisBottom(xScale)

        axisLayer.append("g")
            .attr("class", "axis x")
            .attr("transform", "translate("+[margin.left, chartHeight+margin.top]+")")
            .call(xAxis);

    }
}());
</script>    
</body>
</html>

輸出如下所示：

Answer 1

在這種情況下，樂隊規模是錯誤的工具。 主要原因是頻帶標度具有相關聯的帶寬。

您可以調整波段比例的paddingInner和paddingOuter值，以獲得預期的結果。 但是，最簡單的解決方案是改用分值。 點秤：

...是帶寬固定為零的頻帶比例的變體。 （強調我的）

所以，應該是：

var yScale = d3.scalePoint()

scaleBand 軸中的數據點和刻度未對齊

問題描述

1 個解決方案

解決方案1
8 已采納 2017-11-08 07:09:59

scaleBand 軸中的數據點和刻度未對齊

問題描述

1 個解決方案

解決方案1 8 已采納 2017-11-08 07:09:59

解決方案1
8 已采納 2017-11-08 07:09:59