change height and direction of triangles in D3 - svg

Question

I have a basic Bar chart with red and green triangles. Red triangle on negative comparison of data and green triangle if the data is positive. The green triangle should always point upwards and red downwards at the bottom of the bar and if the data is neutral the circle should be displayed. I'm unable to align the arrow/triangle to bottom(touch x-axis) as well as rotate the arrow to point up or down based on condition. Here is my code
svg.selectAll("line.arrow")
.data(input.filter(function (d) { return d.AverageValue}))
.enter().append("line")
.attr("class", "arrow")
.attr("x1", function (d) {
return xScale(d.AppName) + xScale.rangeBand() / 2;
})
.attr("x2", function (d) {
return xScale(d.AppName) + xScale.rangeBand() / 2;
})
.attr("y1", function (d) {
return yScale(20);//bring arrows to bottom
})
.attr("y2", function (d) {
var getValue = d.AverageValue;
if (getValue >= 0) {
return yScale(10)-37;
} else {
return yScale(23) - 6;
}
})
.attr("marker-end", function (d) {
var getValue = d.ComparedToPreviousMonth;
if (getValue < 0) {
return "url(#redArrow)";
} else if (getValue > 0) {
return "url(#greenArrow)";
}
});
The entire code is in fiddle
http://jsfiddle.net/911vgmp1/

Answer 1

Looking at the generated svg output you will notice that the lines you are using for setting your markers are geometrically points rather than lines, i.e. x1 equals x2 and y1 equals y2:
<line class="arrow" x1="33.5" x2="33.5" y1="296" y2="296" marker-end="url(#redArrow)"></line>
Because this line / point doesn't have any direction there is no way to determine the orientation of the marker. Hence, your orient="auto" will not rotate the markers appropriately.
In the generator function for attr("marker-end") you are using d.ComparedToPreviousMonth which works fine determining which marker to use. The generator function for .attr("y2"), however, uses d.AverageValue to calcutate y2 and, thus, the direction of the line and the orientation of the marker. Since the AverageValues are all positive there is no change in direction of your lines / markers.
You may fix this by adjusting the y1 and y2 generators to:
.attr("y1", function (d) {
return h;
})
.attr("y2", function (d) {
var getValue = d.ComparedToPreviousMonth;
if (getValue < 0) {
return h - .001;
} else {
return h + .001;
}
})
For the purists the y2 generator may even be shortened to:
.attr("y2", function (d) {
return d.ComparedToPreviousMonth < 0 ? h - .001 : h + .001;
})
With that in place, you'll just have to set different refX values for your markers to visually position them on the x-axis:
.attr("refX", function(d) {
return d == "red" ? 0 : 10;
})
See the updated JSFiddle.

Answer 2

Here's one way. I've
Split the green and red arrows so they can have separate transforms
translated the markers down to the bottom of the bars
Made the markers overflow visible so they still display after the data is translated
// add text and arrow
svg.selectAll("line.arrow")
.data(["red"])
.enter()
.append("defs").append("marker")
.attr("id", function (d) {
return d + "Arrow";
})
.attr("viewBox", "0 -5 10 10")
.attr("refX", 8)
.attr("markerWidth", 12)
.attr("markerHeight", 20)
.attr("orient", "auto")
.attr("overflow", "visible")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5")
.attr("transform", "rotate(90, 5, 0) translate(56, 0)")
.attr("class", function (d) {
return "marker_" + d;
});
svg.selectAll("line.arrow")
.data(["green"])
.enter()
.append("defs").append("marker")
.attr("id", function (d) {
return d + "Arrow";
})
.attr("viewBox", "0 -5 10 10")
.attr("refX", 8)
.attr("markerWidth", 12)
.attr("markerHeight", 20)
.attr("orient", "auto")
.attr("overflow", "visible")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5")
.attr("transform", "rotate(270, 5, 0) translate(-56, 0)")
.attr("class", function (d) {
return "marker_" + d;
});