nteract / semiotic

A data visualization framework combining React & D3
https://semioticv1.nteract.io/
Other
2.43k stars 133 forks source link

axis tickFormat to return an image? #515

Closed ohelixa closed 4 years ago

ohelixa commented 4 years ago

Is it possible to print an image as a tick?

image

But I also need to reach the points[i] info in the tickFormat

ohelixa commented 4 years ago

Found solution, I'll leave it here in case someone would need something similar.

      tickFormat: (d, i) => {
        return (
          <g>
            <defs>
              <pattern
                id={`hx-h-bar-image-${d}`}
                height="100%"
                width="100%"
                patternContentUnits="objectBoundingBox"
              >
                <image
                  width="1"
                  height="1"
                  xlinkHref={dataProp[i - 1] && dataProp[i - 1].pic}
                />
              </pattern>
            </defs>
            <circle r={16} stroke="white" fill={`url(#hx-h-bar-image-${d})`} />
            <text>{d.week}</text>
          </g>
        );
      }
emeeks commented 4 years ago

Yes exactly, you can display any valid SVG element, including <image>