1

Still working on this visualization: https://ayyrickay.github.io/circulating-magazines/

I've got some good updates going, but one thing that's irking me is that, when somebody clicks on the line chart, it maintains state. For example, if I click on an issue, it runs this code to update both application state and crossfilter state

(chart) => {
    chart.selectAll('circle').on('click', (selected) => {
    state.circulationClicked = true
    const clearFilterButton = document.getElementById('clearIssueFilterButton')
    clearFilterButton.classList.remove('hide')
    clearFilterButton.addEventListener('click', lineChart.unClick)
    renderIssueData(selected)
    samplePeriodEnd.filter(d => {
        const currentIssueDate = moment.utc(selected.x)
        const periodEnding = moment.utc(d)
        const periodStart = moment.utc({'year': periodEnding.get('year'), 'month': periodEnding.get('month') === 5 ? 0 : 6, 'day':1})
        if (currentIssueDate >= periodStart && currentIssueDate <= periodEnding) {
            Object.assign(state, {currentIssueDate, periodStart, periodEnding})
            return currentIssueDate >= periodStart && currentIssueDate <= periodEnding
        }
    })

    state.totalSalesByState = salesByState.all().reduce((a, b) => ({value: {sampled_total_sales: a.value.sampled_total_sales + b.value.sampled_total_sales}}))
    us1Chart.colorDomain(generateScale(salesByState))
    us1Chart.customUpdate()
    })
}

There's a lot going on here, but I'm frustrated because it seems like because I've overridden the default click, I've blown out some functionality that I wanted - specifically, I want the circle associated with the data point to stay in the viz.

Using the renderDataPoints method isn't right, because I only need the circle to stick around on click. I've also tried creating a moveToFront method to bring the circle to the front, but that hasn't worked for me. My problem seems to be that I'm not able to locate the circle and modify its properties in the click method itself. I get the data, but I don't get the HTML/SVG associated with the data point to modify it accordingly.

Rambly question as always, but would love some help sorting this out (and potentially getting it documented somewhere?)

ricky
  • 242
  • 1
  • 9
  • I haven't looked closely at this, but do you mean that you want to preserve the original click behavior and add another behavior on top of it? The way to do that would be to [namespace your click event handler](https://github.com/d3/d3-selection/blob/v1.4.0/README.md#selection_on) with e.g. `'click.foo'` - then you're not replacing the original handler, just adding another one. (Apologize if this is not the right question, I have only glanced at this!) – Gordon Jul 08 '19 at 19:56
  • To answer your last question: you get the element associated with the point in *this*. (See second paragraph of the same doc I linked above.) `d3.selecf(this)` will convert the element to a selection. – Gordon Jul 09 '19 at 07:04
  • `select` obviously haha – Gordon Jul 09 '19 at 18:52
  • Hm... But when I console.log the result of `d3.select(this)` it just returns an array with an undefined, and an array with a null (the parent array). Also, my events are namespaced - I'm using `pretransition.click` as my event listener, and when I namespaced the click in the code above, it didn't seem to fix the issue. – ricky Jul 12 '19 at 06:34
  • There are a lot of questions here & it might be better to focus on what you are trying to do rather than all the possible routes you can think to get there. :) However, just to finish this thread, `this` binding will only work for classic `function(d) { ... }` functions, not for arrow `=>` functions. I suspect the real problem is that [when you mouseout from a dot, it disappears](https://github.com/dc-js/dc.js/blob/6cae5353e6f2390c6a9ea0426579c38e251622d2/src/line-chart.js#L400-L404), so this may be irrelevant. – Gordon Jul 12 '19 at 18:30
  • 1
    Maaaan, I feel silly. First, thanks for keeping me on track. Two, I'm an idiot. It was fully the arrow functions. I forgot about the binding issue. And finally, that'll probably be it. I'll try to override the default `mouseout` behavior. Thanks as always! – ricky Jul 12 '19 at 19:13

0 Answers0