Question

我正在尝试制作一个简单的图形，其中我只有一个刻度值，在y轴的最大值处。我实际上有这个工作，但我移动了一些东西，因为我需要在一个函数中包含东西，即使我没有改变这个代码它没有按预期工作。

我一直盯着它看了一个多小时，并欣赏第二眼。

首先，一些代码：

function AlmViz() {
    ... 

    this.x = d3.time.scale();
    this.x.range([0, this.width]);

    this.y = d3.scale.linear();
    this.y.range([this.height, 0]);
}

function loadData(viz) {
    ... 

    viz.yAxis = d3.svg.axis()
        .orient("left")
        .tickSize(0)
        .tickValues([d3.max(viz.y.domain())])   // only one tick at max
        .tickFormat(d3.format(",d"));


    viz.y.domain([0, d3.max(level_data, function(d) { return d[category.name]; })]);

    ...
    viz.svg.append("g")
        .attr("class", "y axis")
        .call(viz.yAxis);
}

var viz = new AlmViz();
loadData(viz);

然而，y轴是不稳定的。刻度线具有正确的文本，但它被放置在错误的位置。

<g class="y axis">
     <g class="tick major" style="opacity: 1;" transform="translate(0,7016)">
         <line x2="0" y2="0"></line>
         <text x="-3" y="0" dy=".32em" style="text-anchor: end;">7,016</text>
     </g>
     <path class="domain" d="M0,0H0V1H0"></path>
</g>

问题是 transform =“translate（0,7016）。有人知道如何修复它吗？

我应该注意，我在之前的迭代中实际上有相同的代码，并且它工作正常。有关详细信息，请参阅https://github.com/jalperin/almviz/blob/d3/alm.js。

Answer 1

您需要将比例分配给轴，因此

viz.yAxis = d3.svg.axis()
    .orient("left")
    .scale(viz.y)
    .tickSize(0)
    .tickValues([d3.max(viz.y.domain())])   // only one tick at max
    .tickFormat(d3.format(",d"));

d3中的tickValues没有按预期工作

1 个答案: