D3.js çubuğu ve çizgi grafiği birleştiriyor

Question

Çubuk grafik çizgisi ile birleştirerek çok sayıda seri grafik oluşturmak istiyorum. Çıkış aralığını ayarlamak için rangeBands()'u kullandığımda, çizgi ilk çubuğun başlangıcında çizilmeye başlar ve grafikten son çubuğun başında biter. Neyin değişmesi gerekir ki çizginin yumru üstünden başlayıp son işaretin üzerinden mi bitiyor?

var data = [{ date: '1-May-12', close: 58.13, open: 7.41 }, { date: '2-May-12', close: 53.98, open: 45.55 }, { date: '3-May-12', close: 67.00, open: 11.78}]; 
 

 
var margin = { top: 30, right: 40, bottom: 30, left: 50 }, 
 
\t width = 600 - margin.left - margin.right, 
 
\t height = 270 - margin.top - margin.bottom; 
 

 
var parseDate = d3.time.format("%d-%b-%y").parse; 
 

 
var x = d3.scale.ordinal().rangeBands([0, width], .09); // <-- to change the width of the columns, change the .09 at the end to whatever 
 
var y = d3.scale.linear().range([height, 0]); 
 

 
var xAxis = d3.svg.axis().scale(x) 
 
\t .orient("bottom") 
 
\t .tickFormat(d3.time.format("%d-%b-%y")); 
 

 
var yAxisLeft = d3.svg.axis().scale(y) 
 
\t .orient("left"); 
 

 
var valueline = d3.svg.line() 
 
\t .x(function (d) { return x(d.date); }) 
 
\t .y(function (d) { return y(d.open); }); 
 

 
var svg = d3.select("body") 
 
\t .append("svg") 
 
\t .attr("width", width + margin.left + margin.right) 
 
\t .attr("height", height + margin.top + margin.bottom) 
 
\t .append("g") 
 
\t .attr("transform", 
 
\t \t "translate(" + margin.left + "," + margin.top + ")"); 
 

 
// Get the data 
 
data.forEach(function (d) { 
 
\t d.date = parseDate(d.date); 
 
\t d.close = +d.close; 
 
\t d.open = +d.open; 
 
}); 
 

 
// Scale the range of the data 
 
x.domain(data.map(function (d) { return d.date; })); 
 
y.domain([0, d3.max(data, function (d) { return d.close; })]); 
 

 
// Add the X Axis 
 
svg.append("g") 
 
\t \t .attr("class", "x axis") 
 
\t \t .attr("transform", "translate(0," + height + ")") 
 
\t \t .call(xAxis); 
 

 
// Add the Y Axis 
 
svg.append("g") 
 
\t \t .attr("class", "y axis") 
 
\t \t .style("fill", "steelblue") 
 
\t \t .call(yAxisLeft); 
 

 
// Draw the bars 
 
svg.selectAll("bar") 
 
\t \t .data(data) 
 
\t \t .enter() 
 
\t \t .append("rect") 
 
\t \t .style("fill", "#99ffcc") 
 
\t \t .attr("x", function (d) { return x(d.date); }) 
 
\t \t .attr("width", x.rangeBand()) 
 
\t \t .attr("y", function (d) { return y(d.close); }) 
 
\t \t .attr("height", function (d) { return height - y(d.close); }); 
 

 
// Add the valueline path 
 
svg.append("path") 
 
\t \t .attr("d", valueline(data));

body { 
 
    font: 12px Arial; 
 
} 
 
path { 
 
    stroke: red; 
 
    stroke-width: 2; 
 
    fill: none; 
 
} 
 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: grey; 
 
    stroke-width: 1; 
 
    shape-rendering: crispEdges; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 1

yarım rangeband satır fonksiyonları x erişimci ayarlayın:

var valueline = d3.svg.line() 
    .x(function (d) { return x(d.date) + x.rangeBand()/2; }) 
    .y(function (d) { return y(d.open); }); 

---

Tam Kanunu:

var data = [{ date: '1-May-12', close: 58.13, open: 7.41 }, { date: '2-May-12', close: 53.98, open: 45.55 }, { date: '3-May-12', close: 67.00, open: 11.78}]; 
 

 
var margin = { top: 30, right: 40, bottom: 30, left: 50 }, 
 
\t width = 600 - margin.left - margin.right, 
 
\t height = 270 - margin.top - margin.bottom; 
 

 
var parseDate = d3.time.format("%d-%b-%y").parse; 
 

 
var x = d3.scale.ordinal().rangeBands([0, width], .09); // <-- to change the width of the columns, change the .09 at the end to whatever 
 
var y = d3.scale.linear().range([height, 0]); 
 

 
var xAxis = d3.svg.axis().scale(x) 
 
\t .orient("bottom") 
 
\t .tickFormat(d3.time.format("%d-%b-%y")); 
 

 
var yAxisLeft = d3.svg.axis().scale(y) 
 
\t .orient("left"); 
 

 
var valueline = d3.svg.line() 
 
\t .x(function (d) { return x(d.date) + x.rangeBand()/2; }) 
 
\t .y(function (d) { return y(d.open); }); 
 

 
var svg = d3.select("body") 
 
\t .append("svg") 
 
\t .attr("width", width + margin.left + margin.right) 
 
\t .attr("height", height + margin.top + margin.bottom) 
 
\t .append("g") 
 
\t .attr("transform", 
 
\t \t "translate(" + margin.left + "," + margin.top + ")"); 
 

 
// Get the data 
 
data.forEach(function (d) { 
 
\t d.date = parseDate(d.date); 
 
\t d.close = +d.close; 
 
\t d.open = +d.open; 
 
}); 
 

 
// Scale the range of the data 
 
x.domain(data.map(function (d) { return d.date; })); 
 
y.domain([0, d3.max(data, function (d) { return d.close; })]); 
 

 
// Add the X Axis 
 
svg.append("g") 
 
\t \t .attr("class", "x axis") 
 
\t \t .attr("transform", "translate(0," + height + ")") 
 
\t \t .call(xAxis); 
 

 
// Add the Y Axis 
 
svg.append("g") 
 
\t \t .attr("class", "y axis") 
 
\t \t .style("fill", "steelblue") 
 
\t \t .call(yAxisLeft); 
 

 
// Draw the bars 
 
svg.selectAll("bar") 
 
\t \t .data(data) 
 
\t \t .enter() 
 
\t \t .append("rect") 
 
\t \t .style("fill", "#99ffcc") 
 
\t \t .attr("x", function (d) { return x(d.date); }) 
 
\t \t .attr("width", x.rangeBand()) 
 
\t \t .attr("y", function (d) { return y(d.close); }) 
 
\t \t .attr("height", function (d) { return height - y(d.close); }); 
 

 
// Add the valueline path 
 
svg.append("path") 
 
\t \t .attr("d", valueline(data));

body { 
 
    font: 12px Arial; 
 
} 
 
path { 
 
    stroke: red; 
 
    stroke-width: 2; 
 
    fill: none; 
 
} 
 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: grey; 
 
    stroke-width: 1; 
 
    shape-rendering: crispEdges; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>