Just draw the line in the other direction
bar.enter() .append("line") .attr("x1", d => x(d.phase) + x.bandwidth()/2) .attr("y1", d => y(d.start) + ((d.start < d.finish) ? -10 : 10) ) .attr("x2", d => x(d.phase) + x.bandwidth()/2) .attr("y2", d => y(d.finish) + ((d.start < d.finish) ? 15 : -15) ) .attr('class', d => d.start > d.finish ? 'arrow-down' : 'arrow-up' ) .attr("stroke","red") .attr("stroke-width",2) .attr("marker-end","url(#arrow)");
Here's a quik solution: enter
bars again and append arrows (or other shapes) to the
start point of the bars:
bar.enter() .append("circle") .attr("cy", d => y(d.start)) .attr("cx", d => x(d.phase) + x.bandwidth()/2) .attr("r", 5) .attr("fill", "blue")
In this solution, there is no need for additional data attributes although it doesn't harm either. If it is important to show direction, in addition to the start point, I would also consider gradients because they generally add less clutter to the graph.
Note that the direction is implicitly known because of the y-axis. Adding an arrow does not really give new information unless we have data regarding the rate of change from min to max.
- D3 - Draw arrow on bar to reflect the data
- Can d3.js draw two scatterplots on the same graph using data from the same source?
- Looping through data attributes to create 4 separate bar charts... why are there "phantom" data elements being bound to the xAxis?
- How to change color of the dots in D3.js to reflect data on y scale?
- Dimple.js - Add data labels to each bar of the bar chart
- D3.js bar chart 'enter' appears to draw the new bars in wrong position
- I want to update the data on this d3.js bar chart by clicking a button. (onclick)
- Create a bar chart with local storage data (drawing the bars doesn't work)
- Sorting the bars and getting the group data in a grouped bar chart
- In a d3 scatterplot using data from a csv file, how do i draw lines connecting related points when the mouse is over a point?
- Transition for grouped bar chart in d3 when updating the data values
- How do you find the last data point in d3 and draw a circle and a line on it?
- d3.js: how to use data from the parent node? (to show the grouped bar name at the individual bar tooltip)
- Trying to draw a bar chart in D3 and I am not seeing the output
- d3 bar chart labels not getting updated on updating the chart with the new data
- D3 add data into array element inside setInterval() to draw grouped bar chart
- Add data values to D3.js bar chart in the middle or above
- D3 - stacked bar chart shows wrong data in the chart
- Bar Chart Part 1 D3 why does it skip data that is the same value?
- Bar chart: how could I align the data with countries when sorting in D3 v5?
- D3js horizontal bar chart: how to add numbers from data at the end of every bar?
- JS d3 bar plot does not show the data
- updating the data of bar chart in c3.js
- d3 Plus bar chart how to force fixed max y axis range independent of the max data value
- filter the json data and draw the nvd3 chart using filtered data
- In D3, Bar graph's text labels are not updated after the inclusion of additional data
- How to implement hierarchical X-axis Bar chart in my angular JS application. The Bar should have +/- to open/close the hierarchical data like below
- How do I make the height of a horizontal bar chart flexible in order to be resized when new data has been added in?
More Query from same tag
- Don't rotate nodes in radial tree layout in d3.js
- Possible to visualize neo4j graph in ruby on rails application?
- Add triangles along path with D3
- Click through shape to select the underlying shape
- D3: Set filter flood-color based on data
- Heat-map Will Not update
- selecting deep elements in d3
- How to center & scale map in d3js (use projection.center/translate/rotate?)
- D3 tooltip show values from nested dataset
- D3 Canvas Globe With Text At LongLat
- How to format the units to avoid decimal points?
- d3 js enter method not working
- mongo query: add a new field with ranking number based on another field
- D3 How to update the chart after selection from drop down menu with new data
- c3js onload change color
- NVD3 creating arcs with start and end angle
- D3 X-Axis Label Showing Up & Y-Axis Not Showing Up at All
- d3.json not parsing my JSON correctly?
- Stacked area chart SVG path d=NaNNaNNaN
- Map legend color not working since update
- D3 js links length between image nodes
- Placement of svg objects in a webview
- how to format time for dimple.js
- How can I refactor a d3 pie to accept more or less data points?
- D3 event listeners returning MouseEvent instead the datum
- SVG/D3 Group Flashes Once and then Transition
- Specifying Values in D3 Graph from JSON
- D3 Tree Graph - How to transition links when using straight line, not diagonal
- Zoom only when Ctrl + scrolling
- d3.js. Spinning globe with bars