D3 js中的折線圖

Question

我一直在嘗試實現折線組合圖，但效果不佳。 這是我的代碼

 function renderNormalizedStackBarChart(inputData,dom_element_to_append_to, path_to_data) { var margin = {top: 20, right: 231, bottom: 140, left: 40}, width = $(dom_element_to_append_to).width() - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var xscale = d3.scale.ordinal() .rangeRoundBands([0, width], .1); var yScaleLeft = d3.scale.linear() .rangeRound([height, 0]); var yScaleRight = d3.scale.linear() .rangeRound([height, 0]); var colors = d3.scale.ordinal() .range(["#63c172", "#ee9952", "#46d6c4", "#fee851", "#98bc9a"]); var xaxis = d3.svg.axis() .scale(xscale) .orient("bottom"); var yAxisLeft = d3.svg.axis() .scale(yScaleLeft) .orient("left") .tickFormat(d3.format(".0%")); var yAxisRight = d3.svg.axis() .scale(yScaleRight) .orient("right") .tickFormat(d3.format(".0%")); var x = d3.time.scale() .range([0, width - 25]); /*category.selectAll("rect") .data(function(d) { return d.responses; }) .enter().append("rect") .attr("width", xscale.rangeBand()) .attr("y", function(d) { return yScaleLeft(d.yp1); }) .attr("height", function(d) { return yScaleLeft(d.yp0) - yScaleLeft(d.yp1); }) .style("fill", function(d) { return colors(d.response); });*/ var temp = 0; var line = d3.svg.line() .x(function(d, i) { console.log(temp); var temp2 = temp; temp += xscale.rangeBand(); return temp2; }) .y(function(d) { console.log(yScaleRight(d.value)); return yScaleRight(d.value); }) .interpolate("linear") ; var svg = d3.select(dom_element_to_append_to).append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.tsv(path_to_data, function(error, data) { //data = inputData; var categories = d3.keys(data[0]).filter(function(key) { return key !== "CategoryNames"; }); var parsedata = categories.map(function(name) { return { "CategoryNames": name }; }); data.forEach(function(d) { parsedata.forEach(function(pd) { pd[d["CategoryNames"]] = d[pd["CategoryNames"]]; }); }); colors.domain(d3.keys(parsedata[0]).filter(function(key) { return key !== "CategoryNames" && key !== "Base"; })); parsedata.forEach(function(pd) { var y0 = 0; pd.responses = colors.domain().map(function(response) { var responseobj = {response: response, y0: y0, yp0: y0}; y0 += +pd[response]; responseobj.y1 = y0; responseobj.yp1 = y0; return responseobj; }); pd.responses.forEach(function(d) { d.yp0 /= y0; d.yp1 /= y0; }); pd.totalresponses = pd.responses[pd.responses.length - 1].y1; }); console.log(parsedata); xscale.domain(parsedata.map(function(d) { return d.CategoryNames; })); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xaxis) .selectAll("text") .attr("y", 5) .attr("x", 7) .attr("dy", ".35em") .attr("transform", "rotate(65)") .style("text-anchor", "start"); svg.append("g") .attr("class", "y axisLeft") .call(yAxisLeft); svg.append("g") .attr("class", "y axisRight") .attr("transform", function() { return "translate(" + width + "," + 0 + ")"; }) .call(yAxisRight); var category = svg.selectAll(".category") .data(parsedata) .enter().append("g") .attr("class", "category") .attr("transform", function(d) { return "translate(" + xscale(d.CategoryNames) + ",0)"; }); category.selectAll("rect") .data(function(d) { return d.responses; }) .enter().append("rect") .attr("width", xscale.rangeBand()) .attr("y", function(d) { return yScaleLeft(d.yp1); }) .attr("height", function(d) { return yScaleLeft(d.yp0) - yScaleLeft(d.yp1); }) .style("fill", function(d) { return colors(d.response); }); var convertedData = []; parsedata.forEach(function(item) { convertedData.push({response: item.CategoryNames, value: item.responses[0].yp1}) }); temp = xscale.rangeBand()/2; console.log(convertedData); svg.append("path") .data(convertedData) .attr("class", "line") .attr("d", line(convertedData)); var legend = svg.selectAll(".legend") .data(colors.domain()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(82," + ((height - 18) - (i * 20)) + ")"; }); legend.append("rect") .attr("x", width - 18) .attr("width", 18) .attr("height", 18) .style("fill", colors); legend.append("text") .attr("x", width + 10) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "start") .text(function(d) { return d; }); d3.selectAll("input").on("change", handleFormClick); function handleFormClick() { if (this.value === "bypercent") { transitionPercent(); } else { transitionCount(); } } function transitionPercent() { yScaleLeft.domain([0, 1]); var trans = svg.transition().duration(250); var categories = trans.selectAll(".category"); categories.selectAll("rect") .attr("y", function(d) { return yScaleLeft(d.yp1); }) .attr("height", function(d) { return yScaleLeft(d.yp0) - yScaleLeft(d.yp1); }); yAxisLeft.tickFormat(d3.format(".0%")); svg.selectAll(".y.axisLeft").call(yAxisLeft); } function transitionCount() { yScaleLeft.domain([0, d3.max(parsedata, function(d) { return d.totalresponses; })]); var transone = svg.transition() .duration(100); var categoriesone = transone.selectAll(".category"); categoriesone.selectAll("rect") .attr("y", function(d) { return this.getBBox().y + this.getBBox().height - (yScaleLeft(d.y0) - yScaleLeft(d.y1)) }) .attr("height", function(d) { return yScaleLeft(d.y0) - yScaleLeft(d.y1); }); var transtwo = transone.transition() .delay(150) .duration(200) .ease("bounce"); var categoriestwo = transtwo.selectAll(".category"); categoriestwo.selectAll("rect") .attr("y", function(d) { return yScaleLeft(d.y1); }); yAxisLeft.tickFormat(d3.format(".2s")); svg.selectAll(".y.axisLeft").call(yAxisLeft); } }); d3.select(self.frameElement).style("height", (height + margin.top + margin.bottom) + "px"); } var inputData = []; renderNormalizedStackBarChart(inputData,"#normalizedChart", "data/normalizedChart.tsv"); 

  rect.bordered { stroke: #E6E6E6; stroke-width: 2px; } body { font-size: 9pt; font-family: Consolas, courier; } text.axis { fill: #000; } .axisLeft path, .axisLeft line { fill: none; stroke: #000; shape-rendering: crispEdges; } .axisRight path, .axisRight line { fill: none; stroke: #000; shape-rendering: crispEdges; } .bar { fill: steelblue; } .x.axis path { display: none; } .legend line { stroke: #000; shape-rendering: crispEdges; } path .line { stroke: #000; shape-rendering: crispEdges; } form { position: absolute; right: 10px; top: 10px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <div class="row"> <form> <label><input type="radio" name="mode" value="bypercent" checked> Percent</label> <label><input type="radio" name="mode" value="bycount"> Number of Respondants</label> </form> <div id="normalizedChart"></div> </div> 

但是我得到的只是下圖所示的圖形。 如何使路徑顯示為行。代碼中的InputData變量在這里沒有用，因為我正在通過tsv文件讀取數據。

Answer 1

您必須將樣式添加到fill : none到路徑中

svg.append("path")
    .data(convertedData)
    .attr("class", "line")
    .attr("d", line(convertedData));
    .attr("stroke", "blue")
    .attr("stroke-width", 2)
    .attr("fill", "none");