How to draw arrow head with D3 (Responsive)
1,678 views
Skip to first unread message
Hsu Myat
Nov 7, 2017, 8:38:55 PM11/7/17
to d3-js
I would like to draw thermometer kind of bar by using D3.js version 3. I have done drawing basic responsive rectangle with two filled colors. However i have problem figuring out arrow heads. I have added the screenshot and code the below. Thanks for your kind help guys!!
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<style>
#temp_pue_wrapper {
position: relative;
height: 0;
width: 100%;
padding: 0;
/* padding-bottom will be overwritten by JavaScript later */
padding-bottom: 100%;
}
#temp_pue_wrapper > svg {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
</style>
<div id="temp_pue_wrapper"></div>
<script>
var width = 500,
height = 30,
tmp_wrapper = d3.select("#temp_pue_wrapper")
.attr(
"style",
"padding-bottom: " + Math.ceil(height * 85 / width) + "%"
)
.append("svg")
.attr("viewBox", "0 0 " + width + " " + height);
var gradient = tmp_wrapper.append("defs")
.append("linearGradient")
.attr("id", "gradient")
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "100%")
.attr("y2", "0%")
.attr("spreadMethod", "pad");
gradient.append("stop")
.attr("offset", "0%")
.attr("stop-color", "#228582")
.attr("stop-opacity", 1);
gradient.append("stop")
.attr("offset", "50%")
.attr("stop-color", "#228582")
.attr("stop-opacity", 1);
gradient.append("stop")
.attr("offset", "50%")
.attr("stop-color", "#C23439")
.attr("stop-opacity", 1);
gradient.append("stop")
.attr("offset", "100%")
.attr("stop-color", "#C23439")
.attr("stop-opacity", 1);
tmp_wrapper.append('rect')
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "url(#gradient)");
</script>
sandeep edara
Nov 8, 2017, 11:02:06 AM11/8/17
to d3-js
Hi Hsu,
Regards,
I have changed the approach to build the arrows,
Please find the updated snippet below
<html>
<head>
<style>
#temp_pue_wrapper {
height: 20%;
width: 100%;
}
</style>
</head>
<body>
<div id="temp_pue_wrapper"></div>
<script>
function tempChart() {
var container = "temp_pue_wrapper";
var height = document.getElementById(container).clientHeight;
var width = document.getElementById(container).clientWidth;
var svg = d3.select("#" + container)
.append("svg")
.attr({
height: height,
width: width
})
.append("g");
var heightOfArrow = 40;
var lengthOfArrowHead = 10;
var line = d3.svg.line()
.x(function (d) {
return d.x;
})
.y(function (d) {
return d.y;
});
var pointsLeft = [{
x: width / 2,
y: 0
}, {
x: width / 2,
y: heightOfArrow
}, {
x: lengthOfArrowHead,
y: heightOfArrow
}, {
x: 0,
y: heightOfArrow / 2
}, {
x: lengthOfArrowHead,
y: 0
}];
var pointsRight = [{
x: width/2,
y: 0
}, {
x: width/2,
y: heightOfArrow
}, {
x: width - lengthOfArrowHead,
y: heightOfArrow
}, {
x: width,
y: heightOfArrow/2
}, {
x: width - lengthOfArrowHead,
y: 0
}]
svg.append("path")
.attr("d", line(pointsLeft))
.attr("fill", "#228582");
svg.append("path")
.attr("d", line(pointsRight))
.attr("fill", "#C23439")
}
</script>
<script>
tempChart();
</script>
</body>
</html>
Sandeep.
Message has been deleted
Hsu Myat
Nov 8, 2017, 8:29:50 PM11/8/17
to d3-js
Hi Sandeep,
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<style>
#temp_pue_wrapper {
position: relative;
height: 0;
width: 100%;
padding: 0;
/* padding-bottom will be overwritten by JavaScript later */
padding-bottom: 100%;
}
#temp_pue_wrapper > svg {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
path {
fill: none;
}
</style>
<div id="temp_pue_wrapper"></div>
<script>
var width = 500,
height = 30,
tmp_wrapper = d3.select("#temp_pue_wrapper")
.attr(
"style",
"padding-bottom: " + Math.ceil(height * 80 / width) + "%"
.attr("width", "88.8%")
.attr("height", "100%")
.attr("x", "29px")
.attr("y", "0px")
.attr("fill", "url(#gradient)")
.attr("class","foo");
tmp_wrapper.append("svg:path") // Fixed.
.attr("d", d3.svg.symbol().type("triangle-up").size(400))
.style("fill", "#228582")
.attr ("transform", "translate(17,15) rotate (-90)");
tmp_wrapper.append("svg:path") // Fixed.
.attr("d", d3.svg.symbol().type("triangle-up").size(400))
.style("fill", "#C23439")
.attr ("transform", "translate(485,15) rotate (90)");
//This is the accessor function we talked about above
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate('linear');
//The data for our line
var lineData = [
{ "x": -5, "y": 0},
{ "x": 20, "y": 0},
{ "x": -5, "y": 15},
{ "x": 20, "y": 30},
{ "x": -5, "y": 30},
{ "x": -30, "y": 15},
{ "x": -5, "y": 0}
];
//The line SVG Path we draw
var lineGraph = tmp_wrapper.append("path")
.attr("d", lineFunction(lineData))
.style("fill", "#228582");
var lineGraph1 = tmp_wrapper.append("path")
.attr("d", lineFunction(lineData))
.style("fill", "#C23439")
.attr ("transform", "translate(502,30) rotate(180)");
</script>
Thanks for your reply. I have figured it out by using triangle shape and line graph as per below code. Thanks for your kind respond.
Reply all
Reply to author
Forward
0 new messages