Related
I want to open a graph as a modal after clicking another graph. However, what shows up in the modal is plain text, like such:
After inspecting the element, it seems like the text is the <g> tag that was in the svg, but I'm not sure what that means.
^ The corresponding HTML code is <text fill="currentColor" x="-9" dy="0.32em">−1.5</text>
I'm not sure why this is happening and I can't find any similar problems online for this.
Here's my graph code:
function Wavelet() {
const gWidth = window.innerWidth / 5
const gWidth_modal = window.innerWidth/3
var margin = {top: 20, right: 30, bottom: 30, left: 20},
width = gWidth - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var margin_modal = {top: 20, right: 30, bottom: 30, left: 20},
width_modal = gWidth_modal - margin_modal.left - margin_modal.right,
height_modal = 400 - margin_modal.top - margin_modal.bottom;
// append the svg object to the body of the page
var svg = d3.select("#contour").selectAll("*").remove();
svg = d3.select("#contour").append("svg")
.attr("width", gWidth + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
var svg_modal = d3.select("#contour-modal").selectAll("*").remove();
svg_modal = d3.select("#contour-modal").append("svg_modal")
.attr("width", width_modal + margin_modal.left + margin_modal.right)
.attr("height", height_modal + margin_modal.top + margin_modal.bottom)
.append("g")
.attr("transform", "translate(" + margin_modal.left + "," + margin_modal.top + ")")
var color = d3.scaleLinear()
.domain([0, 0.01]) // Points per square pixel.
.range(["#c3d7e8", "#23527a"])
const data = [
{ x: 3.4, y: 4.2 },
{ x: -1, y: 4.2 },
{ x: -1, y: 2.8 },
{ x: 3.6, y: 4.3 },
{ x: -0.1, y: 3.7 },
{ x: 4.7, y: 2.5 },
{ x: 0.8, y: 3.6 },
{ x: 4.7, y: 3.7 },
{ x: -0.4, y: 4.2 },
{ x: 0.1, y: 2.2 },
{ x: 0.5, y: 3 },
{ x: 4.3, y: 4.5 },
{ x: 3.4, y: 2.7 },
{ x: 4.4, y: 3.6 },
{ x: 3.3, y: 0.6 },
{ x: 3, y: 3.4 },
{ x: 4.7, y: 0 },
{ x: -0.7, y: 2.7 },
{ x: 2.6, y: 2 },
{ x: 0, y: -1 },
{ x: 3.4, y: 4.5 },
{ x: 3.9, y: 4.6 },
{ x: 0.7, y: 3.9 },
{ x: 3, y: 0.2 }
];
// Add X axis
var x = d3.scaleLinear()
.domain([-2, 6])
.range([ 0, width ]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
var x_modal = d3.scaleLinear()
.domain([-2, 6])
.range([ 0, width_modal ]);
svg_modal.append("g")
.attr("transform", "translate(0," + height_modal + ")")
.call(d3.axisBottom(x_modal));
// Add Y axis
var y = d3.scaleLinear()
.domain([-2, 5])
.range([ height, 0 ]);
svg.append("g")
.call(d3.axisLeft(y));
var y_modal = d3.scaleLinear()
.domain([-2, 5])
.range([ height_modal, 0 ]);
svg_modal.append("g")
.call(d3.axisLeft(y_modal));
// compute the density data
var densityData = d3.contourDensity()
.x(function(d) { return x(d.x); }) // x and y = column name in .csv input data
.y(function(d) { return y(d.y); })
.size([width, height])
.bandwidth(20) // smaller = more precision in lines = more lines
(data)
// Add the contour: several "path"
svg
.selectAll("path")
.data(densityData)
.enter()
.append("path")
.attr("d", d3.geoPath())
.attr("fill", function(d) { return color(d.value); })
.attr("stroke", "#4285f4")
svg_modal
.selectAll("path")
.data(densityData)
.enter()
.append("path")
.attr("d", d3.geoPath())
.attr("fill", function(d) { return color(d.value); })
.attr("stroke", "#4285f4")
}
export default Wavelet
I have 2 svg as the one in the modal doesn't get rendered if I use the same one (for some reason). If that's what's causing me problems, please let me know how to fix it.
useEffect(() => {
(async () => {
await Wavelet()
})();
});
// const showModal = () => {setIsopen((prev) => !prev); console.log("aaaaaaaaaa");}
function showModal (id) {
setIsopen((prev) => !prev);
setModalID(id)
}
function Graph() {
const modal = <div>
<div id="contour" onClick={() => showModal(4)}>
</div>
{isOpen && (modalID == 4) && (
<ModalContent onClose={() => setIsopen(false)}>
<div className="modal_c">
<h3>{modalID}</h3>
<div id="contour-modal" >
</div>
<p> </p>
</div>
</ModalContent>
)}
</div>
return modal;
}
}
My modal class if anybody wants to reference it:
const modal = {
position: "fixed",
zIndex: 1,
left: 0,
top: 0,
width: "100vw",
height: "100vh",
overflow: "auto",
backgroundColor: "rgba(192,192,192,0.5)",
display: "flex",
alignItems: "center"
};
const close = {
position: "absolute",
top: "11vh",
right: "27vw",
color: "#000000",
fontSize: 40,
fontWeight: "bold",
cursor: "pointer"
};
const modalContent = {
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "50%",
height: "80%",
margin: "auto",
backgroundColor: "white"
// border: "2px solid #000000"
};
export const Modal = ({ onOpen, children }) => {
console.log(children)
return <div onClick={onOpen}> {children}</div>;
};
export const ModalContent = ({ onClose, children }) => {
return (
<div style={modal}>
<div style={modalContent}>
<span style={close} onClick={onClose}>
×
</span>
{children}</div>
</div>
);
};
Problem is with your this statement : d3.select("#contour-modal").append("svg_modal").In order to render the elements correctly, you need to append them to svg. d3.select("#contour-modal").append("svg") . svg_modal is an invalid tag for your requirement. Kindly read more about svg rendering. Done a basic test of your code:
const gWidth = window.innerWidth / 5
const gWidth_modal = window.innerWidth / 3
var margin = {
top: 20,
right: 30,
bottom: 30,
left: 20
},
width = gWidth - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var margin_modal = {
top: 20,
right: 30,
bottom: 30,
left: 20
},
width_modal = gWidth_modal - margin_modal.left - margin_modal.right,
height_modal = 200 - margin_modal.top - margin_modal.bottom;
// append the svg object to the body of the page
var svg = d3.select("#contour").selectAll("*").remove();
svg = d3.select("#contour").append("svg")
.attr("width", gWidth + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
var svg_modal = d3.select("#contour-modal").selectAll("*").remove();
svg_modal = d3.select("#contour-modal").append("svg")
.attr("width", width_modal + margin_modal.left + margin_modal.right)
.attr("height", height_modal + margin_modal.top + margin_modal.bottom)
.append("g")
.attr("transform", "translate(" + margin_modal.left + "," + margin_modal.top + ")")
var color = d3.scaleLinear()
.domain([0, 0.01]) // Points per square pixel.
.range(["#c3d7e8", "#23527a"])
const data = [{
x: 3.4,
y: 4.2
},
{
x: -1,
y: 4.2
},
{
x: -1,
y: 2.8
},
{
x: 3.6,
y: 4.3
},
{
x: -0.1,
y: 3.7
},
{
x: 4.7,
y: 2.5
},
{
x: 0.8,
y: 3.6
},
{
x: 4.7,
y: 3.7
},
{
x: -0.4,
y: 4.2
},
{
x: 0.1,
y: 2.2
},
{
x: 0.5,
y: 3
},
{
x: 4.3,
y: 4.5
},
{
x: 3.4,
y: 2.7
},
{
x: 4.4,
y: 3.6
},
{
x: 3.3,
y: 0.6
},
{
x: 3,
y: 3.4
},
{
x: 4.7,
y: 0
},
{
x: -0.7,
y: 2.7
},
{
x: 2.6,
y: 2
},
{
x: 0,
y: -1
},
{
x: 3.4,
y: 4.5
},
{
x: 3.9,
y: 4.6
},
{
x: 0.7,
y: 3.9
},
{
x: 3,
y: 0.2
}
];
// Add X axis
var x = d3.scaleLinear()
.domain([-2, 6])
.range([0, width]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
var x_modal = d3.scaleLinear()
.domain([-2, 6])
.range([0, width_modal]);
svg_modal.append("g")
.attr("transform", "translate(0," + height_modal + ")")
.call(d3.axisBottom(x_modal));
// Add Y axis
var y = d3.scaleLinear()
.domain([-2, 5])
.range([height, 0]);
svg.append("g")
.call(d3.axisLeft(y));
var y_modal = d3.scaleLinear()
.domain([-2, 5])
.range([height_modal, 0]);
svg_modal.append("g")
.call(d3.axisLeft(y_modal));
// compute the density data
var densityData = d3.contourDensity()
.x(function(d) {
return x(d.x);
}) // x and y = column name in .csv input data
.y(function(d) {
return y(d.y);
})
.size([width, height])
.bandwidth(20) // smaller = more precision in lines = more lines
(data)
// Add the contour: several "path"
svg
.selectAll("path")
.data(densityData)
.enter()
.append("path")
.attr("d", d3.geoPath())
.attr("fill", function(d) {
return color(d.value);
})
.attr("stroke", "#4285f4")
svg_modal
.selectAll("path")
.data(densityData)
.enter()
.append("path")
.attr("d", d3.geoPath())
.attr("fill", function(d) {
return color(d.value);
})
.attr("stroke", "#4285f4")
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.5.0/d3.min.js" integrity="sha512-+rnC6CO1Ofm09H411e0Ux7O9kqwM5/FlEHul4OsPk4QIHIYAiM77uZnQyIqcyWaZ4ddHFCvZGwUVGwuo0DPOnQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="contour">
</div>
<div id="contour-modal">
</div>
I want to update the circles and the paths in this graph with a transition. However it does not work.
I am not very experienced with D3. How can I make my code better? Changing data structure is no problem. I want bind the data to graph with exit() remove() and enter() without deleting whole graph and add the data every time I update again. I do not know how to use enter() exit() and remove() for nested data. One time for the whole group and the other side updating the circle and paths. The ID should be fixed.
Here I have a little single line example from d3noob.
here is a JS Fiddle
var data = [{
id: 'p1',
points: [{
point: {
x: 10,
y: 10
}
}, {
point: {
x: 100,
y: 30
}
}]
},
{
id: 'p2',
points: [{
point: {
x: 30,
y: 100
}
}, {
point: {
x: 230,
y: 30
}
},
{
point: {
x: 50,
y: 200
}
},
{
point: {
x: 50,
y: 300
}
},
]
}
];
var svg = d3.select("svg");
var line = d3.line()
.x((d) => d.point.x)
.y((d) => d.point.y);
function updateGraph() {
console.log('dataset contains', data.length, 'item(s)')
var allGroup = svg.selectAll(".pathGroup").data(data, function(d) {
return d.id
});
var g = allGroup.enter()
.append("g")
.attr("class", "pathGroup")
allGroup.exit().remove()
g.append("path")
.attr("class", "line")
.attr("stroke", "red")
.attr("stroke-width", "1px")
.transition()
.duration(500)
.attr("d", function(d) {
return line(d.points)
});
g.selectAll("path")
.transition()
.duration(500)
.attr("d", function(d) {
return line(d.points)
});
g.selectAll("circle")
.data(d => d.points)
.enter()
.append("circle")
.attr("r", 4)
.attr("fill", "teal")
.attr("cx", function(d) {
return d.point.x
})
.attr("cy", function(d) {
return d.point.y
})
.exit().remove()
}
updateGraph()
document.getElementById('update').onclick = function(e) {
data = [{
id: 'p1',
points: [{
point: {
x: 10,
y: 10
}
}, {
point: {
x: 100,
y: 30
}
}]
},
{
id: 'p2',
points: [{
point: {
x: 30,
y: 100
}
}, {
point: {
x: 230,
y: 30
}
},
{
point: {
x: 50,
y: 300
}
},
]
}
];
updateGraph()
}
$('#cb1').click(function() {
if ($(this).is(':checked')) {
data = [{
id: 'p1',
points: [{
point: {
x: 10,
y: 10
}
}, {
point: {
x: 100,
y: 30
}
}]
},
{
id: 'p2',
points: [{
point: {
x: 30,
y: 100
}
}, {
point: {
x: 230,
y: 30
}
},
{
point: {
x: 50,
y: 200
}
},
{
point: {
x: 50,
y: 300
}
},
]
}
];
} else {
data = [{
id: 'p1',
points: [{
point: {
x: 10,
y: 10
}
}, {
point: {
x: 100,
y: 30
}
}]
}];
}
updateGraph()
});
Edited to change the data join to be be appropriate.
I think the issue has to do with variable data. So, I added data as an argument to the function and specified separate names for different data sets. When I specify different data names, I'm able to update the chart:
var first_data = [{
id: 'p1',
points: [{
point: {
x: 100,
y: 10
}
}, {
point: {
x: 100,
y: 30
}
}]
},
{
id: 'p2',
points: [{
point: {
x: 30,
y: 100
}
}, {
point: {
x: 230,
y: 30
}
},
{
point: {
x: 50,
y: 200
}
},
{
point: {
x: 50,
y: 300
}
},
]
}
];
var svg = d3.select("svg");
var line = d3.line()
.x((d) => d.point.x)
.y((d) => d.point.y);
function updateGraph(data) {
console.log('dataset contains', data.length, 'item(s)')
var allGroup = svg.selectAll(".pathGroup")
.data(data, function(d) { return d; });
var g = allGroup.enter()
.append("g")
.attr("class", "pathGroup")
allGroup.exit().remove()
g.append("path")
.attr("class", "line")
.attr("stroke", "red")
.attr("stroke-width", "1px")
.transition()
.duration(500)
.attr("d", function(d) {
console.log("update path");
return line(d.points)
});
g.selectAll("path")
.transition()
.duration(500)
.attr("d", function(d) {
return line(d.points)
});
g.selectAll("circle")
.data(d => d.points)
.enter()
.append("circle")
.attr("r", 4)
.attr("fill", "teal")
.attr("cx", function(d) {
return d.point.x
})
.attr("cy", function(d) {
return d.point.y
})
.exit().remove()
}
updateGraph(first_data)
document.getElementById('update').onclick = function(e) {
var update_data = [{
id: 'p1',
points: [{
point: {
x: 20,
y: 10
}
}, {
point: {
x: 100,
y: 30
}
}]
},
{
id: 'p2',
points: [{
point: {
x: 30,
y: 100
}
}, {
point: {
x: 230,
y: 30
}
},
{
point: {
x: 50,
y: 300
}
},
]
}
];
updateGraph(update_data)
}
$('#cb1').click(function() {
if ($(this).is(':checked')) {
var click_data = [{
id: 'p1',
points: [{
point: {
x: 10,
y: 10
}
}, {
point: {
x: 100,
y: 30
}
}]
},
{
id: 'p2',
points: [{
point: {
x: 30,
y: 100
}
}, {
point: {
x: 230,
y: 30
}
},
{
point: {
x: 50,
y: 200
}
},
{
point: {
x: 50,
y: 300
}
},
]
}
];
} else {
var click_data = [{
id: 'p1',
points: [{
point: {
x: 10,
y: 10
}
}, {
point: {
x: 100,
y: 30
}
}]
}];
}
updateGraph(click_data)
});
Fiddle: https://jsfiddle.net/wj266kmx/32/
I'm having trouble trying to create a transition of groups. I've created an object from a path based on x and y data. I want this object to transition horizontally 5 times. I have 5 groups that will use the same object and transition. I'm trying to use a for loop so I don't have to rewrite that transition 5 times. You'll see in the snippet I have the groups group1, group2, etc., that are meant to use the same object. Is it possible to create an array of those groups that can be used for the transition? Hopefully this isn't confusing, and I'm using d3.v4. Thank you for taking a look at this.
var width = 900
var height = 1200;
var canvas = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
// x and y coordinates of the path
var objectArray = [{x: 51, y: 44},
{x: 51, y: 49},
{x: 53, y: 50},
{x: 53, y: 53},
{x: 52, y: 53},
{x: 52, y: 60},
{x: 70, y: 85},
{x: 71, y: 160},
{x: 64, y: 181},
{x: 54, y: 181},
{x: 47, y: 170},
{x: 43, y: 170},
{x: 36, y: 181},
{x: 26, y: 181},
{x: 19, y: 160},
{x: 19, y: 85},
{x: 39, y: 60},
{x: 39, y: 53},
{x: 38, y: 53},
{x: 38, y: 50},
{x: 40, y: 49},
{x: 40, y: 44},
{x: 51, y: 44}];
var interpolate = d3.curveCardinal.tension(0.35);
var objectOutline = d3.line()
.x(function(d, i) { return d.x / 2.6 })
.y(function(d, i) { return d.y / 2.2 })
.curve(interpolate);
// The 5 groups that use that same shapeArray for transition
var group1 = canvas.append('g');
var group2 = canvas.append('g');
var group3 = canvas.append('g');
var group4 = canvas.append('g');
var group5 = canvas.append('g');
// The group coordinates for start and end of transition
var locationArray = [{x:1200, y:440, xTransition:250},
{x:1200, y:440, xTransition:278},
{x:1200, y:440, xTransition:306},
{x:1200, y:440, xTransition:334},
{x:1200, y:440, xTransition:362}];
var length = locationArray.length;
for (var i=0; i < length; i++){
// Right now the group1 group is being used for the path
group1.selectAll('path')
.data([objectArray])
.enter()
.append('path')
.attr('d', objectOutline)
group1.attr('transform','translate('+ locationArray[i].x + ','+ locationArray[i].y + ')')
.transition()
.duration((Math.random() * 3000) + 800)
.delay(Math.random() * 3000)
.attr('transform', 'translate(' + locationArray[i].xTransition + ',' + locationArray[i].y + ')');
}
The problem with a for loop is that it will run to the end in few milliseconds, that is, almost immediately. That's not how you create a series of transitions.
The idiomatic way for doing this is using .on("end"... at the end of each transition. For instance, in this snippet, I create a function named transitioning that is called when the transition ends. As you have just 5 elements in the array, I set a counter, and the transition is called only when the counter is < 5:
transitioning(1)
function transitioning(index) {
console.log(locationArray[index].y)
path.transition()
.duration((Math.random() * 3000) + 800)
.delay(Math.random() * 3000)
.attr('transform', 'translate(' + locationArray[index].xTransition + ',' + locationArray[index].y + ')')
.on("end", function() {
if (++index > 4) return;
transitioning(index)
})
}
I'm starting at 1 because the bottle is already at position 0. Also, it's funny that you're transitioning the group, not the path. I changed that. If that's not what you want, just use the same logic to the groups.
Here is your code with this new function:
var width = 600
var height = 500;
var canvas = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
// x and y coordinates of the path
var objectArray = [{
x: 51,
y: 44
}, {
x: 51,
y: 49
}, {
x: 53,
y: 50
}, {
x: 53,
y: 53
}, {
x: 52,
y: 53
}, {
x: 52,
y: 60
}, {
x: 70,
y: 85
}, {
x: 71,
y: 160
}, {
x: 64,
y: 181
}, {
x: 54,
y: 181
}, {
x: 47,
y: 170
}, {
x: 43,
y: 170
}, {
x: 36,
y: 181
}, {
x: 26,
y: 181
}, {
x: 19,
y: 160
}, {
x: 19,
y: 85
}, {
x: 39,
y: 60
}, {
x: 39,
y: 53
}, {
x: 38,
y: 53
}, {
x: 38,
y: 50
}, {
x: 40,
y: 49
}, {
x: 40,
y: 44
}, {
x: 51,
y: 44
}];
var interpolate = d3.curveCardinal.tension(0.35);
var objectOutline = d3.line()
.x(function(d, i) {
return d.x / 2.6
})
.y(function(d, i) {
return d.y / 2.2
})
.curve(interpolate);
// The 5 groups that use that same shapeArray for transition
var group1 = canvas.append('g');
// The group coordinates for start and end of transition
var locationArray = [{
x: 200,
y: 40,
xTransition: 20
}, {
x: 200,
y: 40,
xTransition: 80
}, {
x: 200,
y: 40,
xTransition: 140
}, {
x: 200,
y: 40,
xTransition: 220
}, {
x: 200,
y: 40,
xTransition: 280
}];
var length = locationArray.length;
// Right now the group1 group is being used for the path
var path = group1.selectAll('path')
.data([objectArray])
.enter()
.append('path')
.attr('d', objectOutline)
.attr('transform', 'translate(' + locationArray[0].xTransition + ',' + locationArray[0].y + ')')
transitioning(1)
function transitioning(index) {
path.transition()
.duration((Math.random() * 3000) + 800)
.delay(Math.random() * 1000)
.attr('transform', 'translate(' + locationArray[index].xTransition + ',' + locationArray[index].y + ')')
.on("end", function() {
if (++index > 4) return;
transitioning(index)
})
}
<script src="https://d3js.org/d3.v4.min.js"></script>
I've made a line path for creating a shape of a bottle. I'm trying to figure out if I can close this path in order to transition it. Ideally I would like to have the bottle animate across the canvas, the same way a circle or rectangle would. Is this possible? I'm still learning d3.
var width = 900,
height = 800;
var canvas = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
var dataArray = [
{x:51,y:44},
{x:51,y:49},
{x:53,y:50},
{x:53,y:53},
{x:52,y:53},
{x:52,y:60},
{x:70,y:85},
{x:71,y:160},
{x:64,y:181},
{x:54,y:181},
{x:47,y:170},
{x:43,y:170},
{x:36,y:181},
{x:26,y:181},
{x:19,y:160},
{x:19,y:85},
{x:39,y:60},
{x:39,y:53},
{x:38,y:53},
{x:38,y:50},
{x:40,y:49},
{x:40,y:44},
{x:51,y:44}
];
var interpolate = d3.curveCardinal.tension(0.35);
var line = d3.line()
.x(function(d,i){ return d.x/1.05 })
.y(function(d,i){ return d.y })
.curve(interpolate);
var group = canvas.append('g')
.attr('transform','translate(0,0)');
var bottle = group.selectAll('path')
.data([dataArray])
.enter()
.append('path')
.attr('fill','#ED5545')
.attr('stroke','#AA2731')
.attr('stroke-width','2')
.attr('id','bottleImage')
.attr('d',line);
bottle.transition()
.attr('x',300);
A SVG path has no x attribute. The simplest solution, therefore, is applying the transition to the group:
group.transition()
.delay(500)
.duration(2000)
.attr('transform', 'translate(300,0)');
Here is the demo:
var width = 400,
height = 300;
var canvas = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
var dataArray = [{
x: 51,
y: 44
}, {
x: 51,
y: 49
}, {
x: 53,
y: 50
}, {
x: 53,
y: 53
}, {
x: 52,
y: 53
}, {
x: 52,
y: 60
}, {
x: 70,
y: 85
}, {
x: 71,
y: 160
}, {
x: 64,
y: 181
}, {
x: 54,
y: 181
}, {
x: 47,
y: 170
}, {
x: 43,
y: 170
}, {
x: 36,
y: 181
}, {
x: 26,
y: 181
}, {
x: 19,
y: 160
}, {
x: 19,
y: 85
}, {
x: 39,
y: 60
}, {
x: 39,
y: 53
}, {
x: 38,
y: 53
}, {
x: 38,
y: 50
}, {
x: 40,
y: 49
}, {
x: 40,
y: 44
}, {
x: 51,
y: 44
}];
var interpolate = d3.curveCardinal.tension(0.35);
var line = d3.line()
.x(function(d, i) {
return d.x / 1.05
})
.y(function(d, i) {
return d.y
})
.curve(interpolate);
var group = canvas.append('g')
.attr('transform', 'translate(0,0)');
var bottle = group.selectAll('path')
.data([dataArray])
.enter()
.append('path')
.attr('fill', '#ED5545')
.attr('stroke', '#AA2731')
.attr('stroke-width', '2')
.attr('id', 'bottleImage')
.attr('d', line);
group.transition()
.delay(500)
.duration(2000)
.attr('transform', 'translate(300,0)');
<script src="https://d3js.org/d3.v4.min.js"></script>
I'm trying to do responsive chart... i used this but its not responsive just when i refresh the page it scaled to right width... Any other ideas then i had ?
And i try to set a div with viewBox and preserveAspectRatio.. But the same result..
var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
height: 100,
series: [{
color: '#1abc9c',
data: [
{ x: 0, y: 50 },
{ x: 1, y: 50 },
{ x: 2, y: 40 },
{ x: 3, y: 40 },
{ x: 4, y: 30 },
{ x: 5, y: 20 },
{ x: 6, y: 0 },
{ x: 7, y: 0 } ]
}]
});
graph.render();
var svg = d3.select('.chart-container').append("svg")
.attr("width", '100%')
.attr("height", '100%')
.attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height))
.attr('preserveAspectRatio','xMinYMin')
.append("g")
.attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");
<div class="chart-container" id="chart"></div>
Ok thanks to Mark Sizer.. Solution is here :
var seriesData = [ [
{ x: 0, y: 50 },
{ x: 1, y: 50 },
{ x: 2, y: 50 },
{ x: 3, y: 40 },
{ x: 4, y: 40 },
{ x: 5, y: 20 },
{ x: 6, y: 0 },
{ x: 7, y: 0 } ] ];
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
renderer: 'area',
series: [
{
data: seriesData[0],
color: '#1abc9c'
}
]
} );
var resize = function() {
graph.configure({
width: window.innerWidth * 0,
height: window.innerHeight * 0.20
});
graph.render();
}
window.addEventListener('resize', resize);
resize();
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.js"></script>
<div id="chart"></div>