Custom tooltipSymbol

[felixhao28]

Currently, tooltipSymbol is merely a symbol. Yet I want more, for example, I need focus lines:

I implemented this by introducing a new attribute "tooltipSymbol", which is a function that accepts data, x and y. The code for my example is (coffeescript):

<LineChart
    tooltipSymbol={(data, x, y) ->
        <g className="util-focus">
            <line
                className="focusLine"
                x1={x}
                y1={yScale(yDomain[0])}
                x2={x}
                y2={yScale(yDomain[1])}
            />
            <line
                className="focusLine"
                x1={xScale(xDomain[0])}
                y1={y}
                x2={xScale(xDomain[1])}
                y2={y}
            />
            <path
                className="dot"
                d={d3.svg.symbol().type("circle")()}
                transform="translate(#{x}, #{y})"
                fill="red"
            />
        </g>
    ...
/>

This might be needed for other people as well. Since it gives an easy way to access the x and y of selected data point and to append additional stuff on the chart.

[serveace]

One thing I'd suggest is to have the ability to pass a react component to render the element. It's much cleaner and we use it internally for my company's custom widgets. See: react-widgets http://jquense.github.io/react-widgets/docs/#/combobox for an example

[codesuki]

Good idea! I was seeing those focus lines in some d3 examples and thought of enabling them somehow. I like your idea of people providing their own elements, that makes the library a little bit lighter than providing.

Typed this comment last night and forgot to hit send :)

@serveace I agree and I think that is what felixhao28 is proposing with his sample. Thanks for the link I will check out the code.