0

我正在尝试制作一个简单的图表，其中在 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。

4

1 回答 1

2

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

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"));
于 2013-04-20T09:57:50.070 回答