Внешний вид линий с шириной хода = 1px

Я работаю над визуализацией, требующей тонких вертикальных линий. В идеале я бы хотел, чтобы они были шириной 1px. Когда я устанавливаю их с использованием линейной шкалы ширины по умолчанию «range()», они выглядят как разные по ширине, потому что их вычисленное положение не всегда является целым числом пикселей. Некоторые из них кажутся ровно 1 px в ширину, хотя (ярче).Внешний вид линий с шириной хода = 1px

Однако, когда я использую rangeRound() на линейной шкале, все линии имеют одинаковую ширину видимости, но она равна 2px, хотя я явно указываю ширину штриха 1px. Округление с использованием Math.round() дает тот же результат. Когда я пытаюсь использовать ширину штриха 0,5, линии также имеют ширину 2 пикселя, а только диммер.

Можно ли нарисовать «настоящие» линии 1px?

EDIT: Вот код:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Test</title> 
<style> 

    svg { 
     border : 1px solid grey; 
    } 
</style> 
</head> 
<body> 
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    <script> 

     var W = 1000, H = 400; 

     var svg = d3.select("body").append("svg").attr("width",W).attr("height",H); 

     svg.append("line").attr("x1",W/2).attr("y1",0).attr("x2",W/2).attr("y2",H).attr("stroke","black"); 
     svg.append("line").attr("x1",0).attr("y1",H/2).attr("x2",W).attr("y2",H/2).attr("stroke","black"); 

    </script> 
</body> 
</html>

На моем экране (1920 х 1080), граница выглядит это 1px широким, но линия SVG выглядит, как будто они 2px.

источник

2016-01-20 GuitarExtended

Возможно, из-за того, что вы используете шкалу для размеров линий, было бы полезно, если бы вы привезли пример – thatOneGuy

Я нашел время, но вот код. – GuitarExtended

всего месяц: P ill посмотреть – thatOneGuy

Как сказал Роберт Лонгсон в комментариях, добавьте crispEdges в форме рендеринга в стиле так:

svg.append("line").style('shape-rendering','crispEdges').attr("x1",W/2).attr("y1",0).attr("x2",W/2).attr("y2",H).attr("stroke","black")

http://jsfiddle.net/reko91/fAaRx/207/

 var W = 1000, H = 400; 
 

 
     var svg = d3.select("body").append("svg").attr("width",W).attr("height",H); 
 

 
     svg.append("line").style('shape-rendering','crispEdges').attr("x1",W/2).attr("y1",0).attr("x2",W/2).attr("y2",H).attr("stroke","black") 
 
     svg.append("line").style('shape-rendering','crispEdges').attr("x1",0).attr("y1",H/2).attr("x2",W).attr("y2",H/2).attr("stroke","black")

svg { 
 
     border : 1px solid black; 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

источник

2016-02-19 18:06:55 thatOneGuy

Добавьте ниже стиль атрибут вашего элемента d3:

.style('shape-rendering','crispEdges')

Это делает линию тоньше.

источник

2017-08-10 07:06:55

Внешний вид линий с шириной хода = 1px

ответ

Смежные вопросы