0
d3.jsを初めて使用しています。バーを水平ティックに表示する方法 - D3.jsで
私は、棒グラフ&をチャート領域に追加して、tickSizeをY軸に追加しました。しかし、ラインはバーの上に来ています。
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10)
.tickSize(-width);
添付のスクリーンショットを確認してください。 黒い水平線はバーの下にある必要があります。
助けてください。事前に
/* Fetch data via ajax */
var margin = { top: 20, right: 20, bottom: 100, left: 40 },
width = this.props.chartWidth - margin.left - margin.right,
height = this.props.chartHeight - margin.top - margin.bottom;
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y = d3.scale.linear().range([height, 0]);
//Remove the svg object if created previously for Clear purpose
$("#" + this.props.chartContainerId).show();
//d3.select("svg").remove();
var chart = d3.select("#" + this.props.chartContainerId)
.append("svg") //append svg element inside #chart
.attr("width", width + (2 * margin.left) + margin.right) //set width
.attr("height", height + margin.top + margin.bottom + 100) //set height
.style("padding-top", "5px");
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10)
.tickSize(-width);
//d3.json("/Scripts/D3Graphs/graphData.js", function (error, data) {
var data = this.state.chartData;
//var data = JSON.parse(chatJsonData);
var props = this.props;
x.domain(data.map(function (d) { return d.Department; }));
//x.domain(jQuery.map(data, function (d) { return d.Department; }));
y.domain([0, d3.max(data, function (d) { return d.NumberOfRequest; })]);// + 1.1
var bar = chart.selectAll("g")
.data(data)
.enter()
.append("g");
//.attr("transform", function (d, i) {
// return "translate(" + x(d.Department) + ", 0)";
//});
//Add the BAR & Set the X,Y Positions
var barWidth = width/data.length;
bar.append("rect")
.attr("y", function (d) {
return y(d.NumberOfRequest);
})
.attr("x", function (d) { return x(d.Department) + margin.left; })
//Set the Height of the BAR
.attr("height", function (d) {
return height - y(d.NumberOfRequest);
})
//Set the Width of the BAR
.attr("width", x.rangeBand()); //set width base on range on ordinal data x.rangeBand()
bar.append("text")
.attr("dy", ".75em")
.text(function (d) {
return d.NumberOfRequest;
})
.style("font-family", "arial")
.style("font-size", "12px")
.style("font-weight", "bold")
.style("fill", "#ffffff")
.style("text-anchor", "middle")
.attr("x", function (d, i) {
return i * (width/data.length) + margin.left + (x.rangeBand()/2);//
})
.attr("y", function (d) {
return y(d.NumberOfRequest) + 15;//height - (d * 4) + 15;
}); // Show the Total Number of Requests on the To pof the BAR
//Create a Div to show the Tooltip on Mouse Hover
var div = d3.select("body").append("div").attr("class", "chartToolTip");
//On mouse hover of the BAR, show the Tooltip with Department Names and Number of Requests.
var toolTipValueText = this.props.toolTipValueText;
var toolTipText = this.props.toolTipText;
bar
.on("mousemove", function (d) {
div.style("left", d3.event.pageX + 10 + "px");
div.style("top", d3.event.pageY - 25 + "px");
div.style("display", "inline-block");
//div.html("Department: " + d.Department + "<br>" + "Number of Requests: " + (d.NumberOfRequest));
div.html(toolTipText + d.Department + "<br>" + toolTipValueText + (d.NumberOfRequest));
});
//Hide the Tooltil on mouse out
bar
.on("mouseout", function (d) {
div.style("display", "none");
});
//Add X-AXIS to the Chart
chart.append("g")
.attr("class", "x axis")
//.attr("transform", "translate(0," + height + ")")
.attr("transform", "translate(" + margin.left + "," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "-.55em")
.attr("transform", "rotate(-90)");
//Add Y-AXIS to the Chart
if (this.props.showYaxis == "yes") {
chart.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + margin.left + ",0)")
.call(yAxis)
}
}感謝。