Question

说我有这个符号代码（请参见How to get Semiotic plot to display in browser）：

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选项来执行此操作，但是当然这会使笔划宽度线太大。如何获得很少的线条，但笔划宽度的线条很小？

semiotic-strokeWidth控制描边宽度和填充线数

0 个答案: