使用视框时如何在D3中阻止路径模糊/消失? [英] How to stop paths from blurring/disappearing in D3 when using a viewbox?

问题描述

我正在使用D3库创建一些图形.它们被放置在一个视图框中(请参见下面的输出"下的代码段).

I am using the D3 library to create some graphs. They are placed within a viewbox (see snippet below under "output").

该视图框用于响应式缩放.

The viewbox is to allow for responsive scaling.

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

However at certain resolutions, the line either disappears, or blurs/thickens. I think this is linked to it not being pixel perfect at those resolutions, but I may be wrong.

除了

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>

绘画输出

不良-注释行分别为75％和50％

Bad - note lines 75% and 50%

好-像黄瓜一样脆！

推荐答案

使用vector-effect ="non-scaling-stroke"，因此笔划宽度不会缩放.这样一来，当您缩小地图时，它就不会崩溃.

Use vector-effect="non-scaling-stroke" so the stroke width doesn't scale. That way it won't collapse when you zoom out.

这篇关于使用视框时如何在D3中阻止路径模糊/消失?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！