Question

我在xml文档中有一组数据，其中的问题和答案如下所示：

<response>
<qaData>
    <session_id>670</session_id>
    <tester_id>2273</tester_id>
    <answer_val>3</answer_val>
    <question>Do you own a GoPro?</question>
    <answer>Not yet</answer>
</qaData>
 <qaData>
    <session_id>670</session_id>
    <tester_id>2274</tester_id>
    <answer_val>2</answer_val>
    <question>Do you own a GoPro?</question>
    <answer>No</answer>
</qaData>
<qaData>
    <session_id>670</session_id>
    <tester_id>2275</tester_id>
    <answer_val>3</answer_val>
    <question>Do you own a GoPro?</question>
    <answer>Not yet</answer>
</qaData>
<qaData>
    <session_id>670</session_id>
    <tester_id>2276</tester_id>
    <answer_val>1</answer_val>
    <question>Do you own a GoPro?</question>
    <answer>Yes</answer>
</qaData>
</response>

这是一个可以选择三种不同答案的问题。基本上我想要做的是创建一个条形图，它接收响应并显示它们代表有多少人选择了哪个答案。目前我可以得到一个条形图，只显示每个人在一个单独的栏中回答

我当前的HTML页面如下所示：

<style type="text/css">
  .chart div {
      font: 10px sans-serif;
      background-color: orange;
      text-align: right;
      padding: 10px;
      margin: 3px;
      color: white;
      }
</style>

</head>

<body>

   <div id="chart" class="chart">

</div>

<script>
   d3.xml("GoProTest.xml", "application/xml", function(xml) {
   d3.select("#chart")
      .selectAll("div")
      .data(xml.documentElement.getElementsByTagName("answer_val"))
      .enter().append("div")
      .style("width", 0)
      .style("width", function(d) { return d.textContent * 250 + "px"; })
      .data(xml.documentElement.getElementsByTagName("answer"))
      .text(function(d) { return d.textContent; })

});

</script>

</body>

请注意，我熟悉HTML和CSS，但我是Javascript和D3js的新手

使用D3js和XML堆叠数据

0 个答案: