score:1
here is a index.js
with a click callback that deletes a bar:
import * as d3 from "d3";
let _data = [
{
id: 0,
country: "china",
population: 1400000000
},
{
id: 1,
country: "india",
population: 1200000000
},
{
id: 2,
country: "usa",
population: 450000000
},
{
id: 3,
country: "russia",
population: 145000000
}
];
const update = data => {
const dimensions = {
width: 600,
height: 600
};
const margins = {
left: 100,
top: 20,
right: 20,
bottom: 100
};
const innerdimensions = {
width: dimensions.width - margins.left - margins.right,
height: dimensions.height - margins.top - margins.bottom
};
const xscale = d3
.scaleband()
.domain(data.map((d) => d.country))
.range([0, innerdimensions.width])
.padding(0.1);
const yscale = d3
.scalelinear()
.domain([0, d3.max(data, (d) => d.population)])
.range([innerdimensions.height, 0]);
const xaxis = d3.axisbottom(xscale);
const yaxis = d3
.axisleft(yscale)
.tickformat((n) => d3.format("0.2s")(n).replace("g", "b"));
d3.select("#canvas").selectall('svg').remove();
const svg = d3
.select("#canvas")
.append("svg")
.attr("width", dimensions.width)
.attr("height", dimensions.height);
const rectg = svg
.append("g")
.attr("width", innerdimensions.width)
.attr("height", innerdimensions.height)
.attr("transform", `translate(${margins.left}, ${margins.top})`);
const xaxisg = rectg
.append("g")
.attr("class", "x-axis")
.attr("transform", `translate(0,${innerdimensions.height})`)
.call(xaxis);
const yaxisg = rectg.append("g").attr("class", "y-axis").call(yaxis);
rectg
.selectall("rect")
.data(data)
.join((enter) =>
enter
.append("rect")
.on('click', (e, d) => {
const newdata = data.filter(item => item.id !== d.id);
update(newdata);
})
.attr("width", xscale.bandwidth())
.attr("height", 0)
.attr("y", (d) => innerdimensions.height)
.attr("x", (d) => xscale(d.country))
.attr("fill", "steelblue")
.attr("stroke", "black")
.attr("stroke-width", 2)
.call((enter) =>
enter
.transition()
.duration(1000)
.attr("y", (d) => yscale(d.population))
.attr("height", (d) => innerdimensions.height - yscale(d.population))
)
);
}
update(_data);
Source: stackoverflow.com
Related Query
- How to change bars color on mouse hover on d3 using join?
- How to select and deselect a svg line and change its color on selection and deselection using d3.js and javascript , jquery?
- How to change color of donut chart created using d3.js?
- How to change color of line in line chart using dimple.js?
- How to change the shape of line to closed bars in existing time series diagram using D3
- how to change the appended text color added to a circle using d3
- How to change the color of two circles upon overlap?
- How to change line color in d3js according to axis value?
- D3 color change on mouseover using classed("active",true)
- Using Javascript D3 library, how can I determine mouse position in data set of an area element on mousemove event?
- How do I change color of a bar in Vega-lite Bar Chart?
- How to change color of the dots in D3.js to reflect data on y scale?
- c3 graph in a dark background; how to change axis and tick value color
- mpld3: How to change the location of the toolbar using a plugin?
- How to change alignment of nodes in a Sankey diagram using D3?
- How to make a color gradient bar using d3js
- How to change point size using geojson file in D3
- how to add mouse events to force directed graph using the d3 canvas renderer?
- How do I change the color of path in D3.js?
- How to change link color on mouseover event
- How to change color scheme?
- How to dynamically change the color of a country on d3 map
- How to change table cell color based on numeric value from .csv report AND when tables are dynamically created?
- How to change text color of legend in d3js graph?
- How to color SVG image based on value from color range using d3?
- How to scale each node, represented as a pie chart, in a graph on mouse over using D3
- How do I change color of path element when its value is selected from dropdown
- 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?
- How to add mouse hover properties to pie drawn on a node in d3?
- How can I change the color of a circle created via d3 each time I click the mouse?
More Query from same tag
- C3.js change label position of Line Chart Y axis to center up of Y axis
- d3.js - attribute d: Expected number
- d3.js insert alternated siblings with selection.join
- Download SVG as PNG, via a modal form(checkbox)
- c3 JS scroll bar jumping when loading new data
- D3 Sunburst - Possible to show certain layers
- How to freeze and unfreeze hover line on click in D3
- Three.js ugly rendering effect
- dc.js geoChoroplethChart doesn't display legend
- How to set locale (globally) in Vega
- d3 localStorage compare arrays .filter coffee script; array variable not working
- How to add superscript & subscript in text in D3
- How to append text to d3js dispatch chart
- Asynchronous data retrieval and caching
- d3.format thousand separator on variables?
- kafka Rest calls + D3 animated chart
- some trouble in d3 v4 when I want to draw a chord
- dc.js Tutorial Line Chart Render
- How to integrate D3.js with backbone.js
- How to get value of bar in d3js bar chart
- What is the difference between these two code blocks in d3.js
- Google chart sankey-- "Cycle found in rows" error
- Calculating the depth of nodes in force layout in d3
- D3.js - Line Graph: Area path goes over x and y axis on zoom
- nvd3 Bubble chart with log scale
- D3 JS Data Filtering
- New instance of chart object affecting existing instance
- Brush and transition coexist
- Unable to update nodes position using d3 force and Svelte
- How to add titles to multiple pie charts, while having a single legend?