2

Say that I have this Semiotic code (see 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;

I have noticed that the strokeWidth option alters both the stroke width (the outline of the bars) as well as the number of fill lines. For example, if strokeWidth is set to 1, it gives many lines, but if it set to 10, it gives very few lines. How can I get it to control only the stroke width? Relatedly, I can't figure out how to get very few lines with only the fillOpacity option. I can do this using the strokeWidth option, but then of course it makes the stroke width line way too big. How can I achieve very few lines, but have a small stroke width line?

bill999
  • 2,147
  • 8
  • 51
  • 103
  • It's very difficult to gather from your code to which elements the value of `style` is applied. Can you maybe create a JSFiddle or something similar? – Ruben Helsloot Jun 29 '19 at 14:42
  • I am brand new to JS. What is JSFiddle and how would I create one? – bill999 Jun 29 '19 at 16:26
  • It's an online Javascript playground. Just create an account, start a new project, make sure it works with some dummy data and post the link here – Ruben Helsloot Jun 29 '19 at 16:58

0 Answers0