Question

我正在创建左轴，当前输出是这样的。

this 。

问题是刻度值之间存在间隙，但是我希望两个刻度值之间具有均匀的间隙，

here

    svg.append("g")
        .attr("class", "axisLeft")
        .call(d3.axisLeft(y1).tickValues(y1TickValues).tickSizeOuter(0).tickFormat(d3.format("d")))
        .selectAll('text')
        .style('text-anchor', 'end');

Answer 1

您要的是不可能的。原因很简单：线性刻度是连续刻度。也就是说，它处理一个连续的（非离散的）定量变量。

您要保证的唯一方法是使用序号刻度，而刻度之间的距离严格地相同，但是这些刻度处理的是定性（分类）变量。不是你想要的。

但是，有一个hack：使用对数刻度。在这种情况下，由于您的域为零，因此，请使用符号对标（避免使用对数为零，在数学上不是实数），该比例在D3 v5（而不是所使用的版本v4）上可用。通过对constant(100) ...使用符号刻度...

var y1 = d3.scaleSymlog()
    .constant(100)
    .domain([0,2000]).range([height,0]);

...我们得到的与您要求的相似（但不完全相同）：

这是更新的代码：

(function(window){

    var graphData = [1699, 725, 1149, 868, 304, 1844, 745, 1846, 1423, 1739, 823, 1404, 226, 1603, 389, 517, 1452, 1842, 930, 547, 1072, 828, 733, 632];
    var timeArr = [];
    for (var i=0;i<24;i++) {
        timeArr.push(i);
    }

    function trans(key){
        return key;
    }

    drawEditGraph();

    function drawEditGraph() {
        var dataGraph = { timeArr:timeArr, graphData:graphData};

        function make_x_gridlines() {
            return d3.axisBottom(x).tickSize(height).tickValues(xTicks)
                .ticks(10)
        }

        var margin = {top: 35, right: 50, bottom: 30, left: 50},
            width = $(window).width() - margin.left - margin.right,
            height = $(window).height() - margin.top - margin.bottom;
        var svgHeight = height + 40;
        var x = d3.scaleLinear().range([0, width]);

        var tickValues= [0,4,8,12,16,20,24];
        var y1TickValues = [20,50,75,100,150,200,300,400,500,750,1000,1500,2000]
        x.domain([0,23]);

        var y1 = d3.scaleSymlog()
        .constant(100)
        .domain([0,2000]).range([height,0]);


        var xTicks = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]
        var valueline2 = d3.line()
            .x(function(d) { return x(d.date); })
            .y(function(d) { return y1(d.open); });

        var svg = d3.select("#graphDiv").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", svgHeight + margin.top + margin.bottom)
            .append("g")
            .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");

        var data = [];
        for (var i=0;i<dataGraph.timeArr.length;i++){
            var obj = {};
            obj.date = dataGraph.timeArr[i];
            obj.open = dataGraph.graphData[i];

            data.push(obj)
        }

        svg.append("g")
            .attr("class", "grid")
            .attr("transform", "translate(0,"+(height)+")")
            .call(make_x_gridlines()
                .tickSize(-width)
                .tickSizeOuter(0)
                .tickFormat("")
            )

        svg.append("path")
            .data([data])
            .attr("class", "line")
            .attr("d", valueline2);



        // Add the X Axis
        svg.append("g")
            .attr("class", "axisBottom")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x).tickValues(xTicks).tickFormat(function(d,i){
                if (d<10)
                    return "0"+d;
                return d;
            }));

        // Add the Y Axis
        svg.append("g")
            .attr("class", "axisLeft")
            .call(d3.axisLeft(y1).tickValues(y1TickValues).tickSizeOuter(0).tickFormat(d3.format("d")))
            .selectAll('text')
            .style('text-anchor', 'end');



        //Add title
        svg.append("text")
            .attr("text-anchor", "center")
            .attr("x", (width/2) - 25)
            .attr("y", height + 35 )
            .attr("fill", "#8E8E8E")
            .attr("font-size", "12")
            .text(trans("Time"));

        // Y0 axis label:
        svg.append("text")
            .attr("text-anchor", "end")
            .attr("transform", "rotate(0)")
            .attr("y", -23)
            .attr("x",  5)
            .attr("font-size", "12")
            .attr("fill", "#725100")
            .text(trans("Colour"));

        svg.append("text")
            .attr("text-anchor", "end")
            .attr("transform", "rotate(0)")
            .attr("y", -8)
            .attr("x", 5)
            .attr("font-size", "12")
            .attr("fill", "#725100")
            .text("("+trans("K") + ")");

    }

}(window));

.line {
  fill: none;
  stroke: #FFC841 ;
  stroke-width: 2px;
}

.axisSteelBlue text{
  fill: #FFC841;
}

.axisRed text{
  fill: #5BCBD4;
}



.grid line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content="Graph Demo">

  <meta name="viewport" content="width=device-width">
  <title>Graph Demo</title>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js"></script>

</head>
<body>
  <div id="graphDiv">
  </div>
</body>
</html>

如何在刻度值中创建具有可变刻度间隔且刻度值之间具有相同距离的左轴

1 个答案: