猿问

如何使这个 D3 水平条形图工作？

最近我开始学习 D3.js v5，我必须制作不同类型的图表。其中一个图形是堆叠的水平条形图。我在 Udemy 中学习了一个教程，但我无法使此图表正常工作。


有人可以帮我吗？


所以，我知道 d3 使用堆栈生成器来生成堆积条形图。我使用它并检查控制台中的值似乎数据格式很好并且可以开始生成堆积条形图但我似乎无法理解为什么它不起作用。


<html>

<script src="https://d3js.org/d3.v5.min.js"></script>

<body></body>



<script type="text/javascript">

var Margin = {top: 30, right: 20, bottom: 40, left: 110};

var InnerWidth = 432 - Margin.left - Margin.right;

var InnerHeight = 432 - Margin.top - Margin.bottom;

var diff_variant=[{Missense_Mutation: 5, Silent: 4, Splice_Site: 0},

      {Missense_Mutation: 8, Splice_Site: 0, Silent: 0},

      {Splice_Site: 4, Missense_Mutation: 4, Silent: 0},

      {Missense_Mutation: 4, Silent: 1, Splice_Site: 0},

      {Missense_Mutation: 5, Splice_Site: 0, Silent: 0},

      {Missense_Mutation: 5, Splice_Site: 0, Silent: 0},

      {Missense_Mutation: 4, Splice_Site: 0, Silent: 0},

      {Missense_Mutation: 4, Splice_Site: 0, Silent: 0},

      {Silent: 1, Missense_Mutation: 1, Splice_Site: 0},

      {Missense_Mutation: 1, Splice_Site: 0, Silent: 0}];


var data1=[{name: "Missense_Mutation", count: 41},

           {name: "Silent", count: 6},

           {name: "Splice_Site", count: 4}];


var variant_name=["Missense_Mutation", "Splice_Site", "Silent"];


var stack = d3.stack().keys(variant_name);


var x = d3.scaleLinear()

          .domain([0, d3.max(data1, function(d){return d.count;})])

          .range([0,InnerWidth]);


var x_axis = d3.scaleLinear()

               .domain([0, d3.max(data1, function(d){return d.count;})])

               .range([0,InnerWidth]);


var y_axis = d3.scaleLinear()

               .domain([0, data1.length])

               .range([0,InnerWidth]);


var y = d3.scaleBand()

          .domain(data1.map(function(d){return d.name;}))

          .rangeRound([0,InnerHeight])

          .padding(0.1);



杨__羊羊
浏览 200回答 1
1回答

慕桂英3389331

当你这样做...var&nbsp;series&nbsp;=&nbsp;svg5.selectAll("g")//etc......您正在选择<g>SVG 中已经存在的元素（两个轴）并将数据绑定到它们。这就是为什么您的输入选择为空的原因。您可以选择null（在此处阅读更多相关信息）：var&nbsp;series&nbsp;=&nbsp;svg5.selectAll(null)或者您可以按类别选择，稍后在输入选择中设置：var&nbsp;series&nbsp;=&nbsp;svg5.selectAll(".foo")但是，最好的解决方案是将轴组移到底部：这不仅可以解决您的问题，而且还会在矩形上方绘制轴。这是带有该更改的代码：<html>&nbsp; <script src="https://d3js.org/d3.v5.min.js"></script>&nbsp; <body></body>&nbsp; <script type="text/javascript">&nbsp; &nbsp; var Margin = {&nbsp; &nbsp; &nbsp; top: 30,&nbsp; &nbsp; &nbsp; right: 20,&nbsp; &nbsp; &nbsp; bottom: 40,&nbsp; &nbsp; &nbsp; left: 110&nbsp; &nbsp; };&nbsp; &nbsp; var InnerWidth = 432 - Margin.left - Margin.right;&nbsp; &nbsp; var InnerHeight = 432 - Margin.top - Margin.bottom;&nbsp; &nbsp; var diff_variant = [{&nbsp; &nbsp; &nbsp; &nbsp; Missense_Mutation: 5,&nbsp; &nbsp; &nbsp; &nbsp; Silent: 4,&nbsp; &nbsp; &nbsp; &nbsp; Splice_Site: 0&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; Missense_Mutation: 8,&nbsp; &nbsp; &nbsp; &nbsp; Splice_Site: 0,&nbsp; &nbsp; &nbsp; &nbsp; Silent: 0&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; Splice_Site: 4,&nbsp; &nbsp; &nbsp; &nbsp; Missense_Mutation: 4,&nbsp; &nbsp; &nbsp; &nbsp; Silent: 0&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; Missense_Mutation: 4,&nbsp; &nbsp; &nbsp; &nbsp; Silent: 1,&nbsp; &nbsp; &nbsp; &nbsp; Splice_Site: 0&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; Missense_Mutation: 5,&nbsp; &nbsp; &nbsp; &nbsp; Splice_Site: 0,&nbsp; &nbsp; &nbsp; &nbsp; Silent: 0&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; Missense_Mutation: 5,&nbsp; &nbsp; &nbsp; &nbsp; Splice_Site: 0,&nbsp; &nbsp; &nbsp; &nbsp; Silent: 0&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; Missense_Mutation: 4,&nbsp; &nbsp; &nbsp; &nbsp; Splice_Site: 0,&nbsp; &nbsp; &nbsp; &nbsp; Silent: 0&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; Missense_Mutation: 4,&nbsp; &nbsp; &nbsp; &nbsp; Splice_Site: 0,&nbsp; &nbsp; &nbsp; &nbsp; Silent: 0&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; Silent: 1,&nbsp; &nbsp; &nbsp; &nbsp; Missense_Mutation: 1,&nbsp; &nbsp; &nbsp; &nbsp; Splice_Site: 0&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; Missense_Mutation: 1,&nbsp; &nbsp; &nbsp; &nbsp; Splice_Site: 0,&nbsp; &nbsp; &nbsp; &nbsp; Silent: 0&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ];&nbsp; &nbsp; var data1 = [{&nbsp; &nbsp; &nbsp; &nbsp; name: "Missense_Mutation",&nbsp; &nbsp; &nbsp; &nbsp; count: 41&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; name: "Silent",&nbsp; &nbsp; &nbsp; &nbsp; count: 6&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; name: "Splice_Site",&nbsp; &nbsp; &nbsp; &nbsp; count: 4&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ];&nbsp; &nbsp; var variant_name = ["Missense_Mutation", "Splice_Site", "Silent"];&nbsp; &nbsp; var stack = d3.stack().keys(variant_name);&nbsp; &nbsp; var x = d3.scaleLinear()&nbsp; &nbsp; &nbsp; .domain([0, d3.max(data1, function(d) {&nbsp; &nbsp; &nbsp; &nbsp; return d.count;&nbsp; &nbsp; &nbsp; })])&nbsp; &nbsp; &nbsp; .range([0, InnerWidth]);&nbsp; &nbsp; var x_axis = d3.scaleLinear()&nbsp; &nbsp; &nbsp; .domain([0, d3.max(data1, function(d) {&nbsp; &nbsp; &nbsp; &nbsp; return d.count;&nbsp; &nbsp; &nbsp; })])&nbsp; &nbsp; &nbsp; .range([0, InnerWidth]);&nbsp; &nbsp; var y_axis = d3.scaleLinear()&nbsp; &nbsp; &nbsp; .domain([0, data1.length])&nbsp; &nbsp; &nbsp; .range([0, InnerWidth]);&nbsp; &nbsp; var y = d3.scaleBand()&nbsp; &nbsp; &nbsp; .domain(data1.map(function(d) {&nbsp; &nbsp; &nbsp; &nbsp; return d.name;&nbsp; &nbsp; &nbsp; }))&nbsp; &nbsp; &nbsp; .rangeRound([0, InnerHeight])&nbsp; &nbsp; &nbsp; .padding(0.1);&nbsp; &nbsp; var svg5 = d3.select("body").append("svg")&nbsp; &nbsp; &nbsp; .attr("preserveAspectRatio", "xMinYMin meet")&nbsp; &nbsp; &nbsp; .attr("viewBox", `0 0 ${InnerWidth + Margin.left + Margin.right} ${InnerHeight + Margin.top + Margin.bottom}`)&nbsp; &nbsp; &nbsp; .style("background", "lightblue")&nbsp; &nbsp; &nbsp; .append("g")&nbsp; &nbsp; &nbsp; .attr("transform", "translate(" + Margin.left + "," + Margin.top + ")");&nbsp; &nbsp; var series = svg5.selectAll("g").data(stack(diff_variant))&nbsp; &nbsp; &nbsp; .enter().append("g")&nbsp; &nbsp; &nbsp; .style("fill", (d, i) => d3.schemeSet3[i]);&nbsp; &nbsp; series.selectAll("rect").data(function(d) {&nbsp; &nbsp; &nbsp; &nbsp; return d;&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; .enter().append("rect")&nbsp; &nbsp; &nbsp; .attr("height", 25)&nbsp; &nbsp; &nbsp; .attr("width", function(d) {&nbsp; &nbsp; &nbsp; &nbsp; return x(d[1]) - x(d[0]);&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; .attr("x", function(d) {&nbsp; &nbsp; &nbsp; &nbsp; return x(d[0]);&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; .attr("y", function(d, i) {&nbsp; &nbsp; &nbsp; &nbsp; return i * 40;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; svg5.append("g").style("font", "12px sans").call(d3.axisLeft(y));&nbsp; &nbsp; svg5.append("g").attr('transform', `translate(0, ${InnerHeight})`).style("font", "12px times").call(d3.axisBottom(x_axis));&nbsp; </script></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答