Javascript 当使用viewbox时，如何防止路径在D3中模糊/消失？

我正在使用D3库创建一些图形。它们被放置在一个视图框中（请参见下面“输出”下的代码段）

视图框用于响应缩放

但是，在某些分辨率下，线条要么消失，要么模糊/变厚。我认为这与这些分辨率的像素不完美有关，但我可能错了

未添加任何其他样式，除了

shape-rendering: crispEdges;

JS

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

this.yAxis = d3.svg.axis()
    .scale(this.y)
    .tickSize(this.width)
    .tickValues([0, 25, 50, 75, 100])
    .tickFormat(function(d) {
        return parseInt(d, 10) + "%";
    })
    .orient("right");

    this.y.domain([0, 100]);


// Y Axis elements
var gy = this.svg.append("g").attr("class", "y axis").call(this.yAxis);

// Add minor class to all the things
gy.selectAll("g").classed("minor", true);

// Move the text over to the left
gy.selectAll("text").attr("x", 0).attr("dy", -4);

输出

<svg class="bargraph" viewBox="0 0 250 250" preserveAspectRatio="xMidYMid" width="100%" height="100%">
    <g class="x axis">...</g>
    <g class="y axis">
        <g class="tick minor" transform="translate(0,150)">
        ..repeat..
    </g>
    ...content...
</svg>

...
……重复。。
…内容。。。

绘制的输出

<svg class="bargraph" viewBox="0 0 250 250" preserveAspectRatio="xMidYMid" width="100%" height="100%">
    <g class="x axis">...</g>
    <g class="y axis">
        <g class="tick minor" transform="translate(0,150)">
        ..repeat..
    </g>
    ...content...
</svg>

坏音符行75%和50%

很好-像黄瓜一样脆

---

使用vector effect=“非缩放笔划”使笔划宽度不缩放。这样，当您缩小时，它不会崩溃。

是的！完美的请将其作为答复提交，谢谢。我需要等20个小时才能申请奖励