Скажите, что у меня есть этот семиотический код (см. Как получить семиотический график для отображения в браузере ):
import React from "react"
import OrdinalFrame from "semiotic/lib/OrdinalFrame"
const frameProps = {
/* --- Data --- */
data: [5,8,2,6,4 ],
/* --- Size --- */
size: [600,600],
margin: { left: 100, bottom: 90, right: 10, top: 40 },
/* --- Layout --- */
type: "bar",
oPadding: 10,
/* --- Customize --- */
style: function(e,t){return{fill:t<5?"url(#gradient)":"url(#triangle)",
fillOpacity:4.5,
strokeWidth:1,
stroke: "black",
strokeOpacity:0.5}},
additionalDefs: [
<pattern
key="triangle"
id="triangle"
width="10"
height="10"
patternUnits="userSpaceOnUse"
>
<rect fill={"#9fd0cb"} width="10" height="10" />
<circle fill={"#7566ff"} r="5" cx="3" cy="3" />
</pattern>,
<linearGradient key="gradient" x1="0" x2="0" y1="0" y2="1" id="gradient">
<stop stopColor={"#dc58e5"} offset="0%" />
<stop stopColor={"#1111ff"} offset="100%" />
</linearGradient>
],
renderMode: ("sketchy"),
title: (
<text textAnchor="middle">
Theaters showing <tspan fill={"#ac58e5"}>Ex Machina</tspan> vs{" "}
<tspan fill={"#E0488B"}>Far from the Madding Crowd</tspan>
</text> ),
}
const XYFrameWrapper = () => {
return <OrdinalFrame {...frameProps} />
}
export default XYFrameWrapper;
Я заметил, что опция strokeWidth
изменяет обаширина штриха (контур полос), а также количество линий заливки.Например, если strokeWidth
установлено на 1
, оно дает много строк, но если оно установлено на 10
, это дает очень мало строк.Как я могу заставить его контролировать только ширину хода?В связи с этим я не могу понять, как получить очень мало строк только с опцией fillOpacity
.Я могу сделать это, используя опцию strokeWidth
, но, конечно, это делает линию ширины обводки слишком большой.Как я могу получить очень мало линий, но иметь маленькую линию ширины штриха?