Javascript 使用y轴上的整数和x轴上的字符串的线图_Javascript_Html_D3.js_Graph

Javascript 使用y轴上的整数和x轴上的字符串的线图

javascript html d3.js graph

Javascript 使用y轴上的整数和x轴上的字符串的线图,javascript,html,d3.js,graph,Javascript,Html,D3.js,Graph,给定以下数据数组，如何使用d3在图形上显示此数据，类似于提供的示例资料我将数据保存在对象数组中，如下所示： [ { "key": "Brazil", "value": 2 }, { "key": "Denmark", "value": 4 }, { "key": "Sweden", "value": 8 }, { "key": "Japan", "value": 10 }, { "ke

给定以下数据数组，如何使用d3在图形上显示此数据，类似于提供的示例

资料我将数据保存在对象数组中，如下所示：

[
  {
    "key": "Brazil",
    "value": 2
  },
  {
    "key": "Denmark",
    "value": 4
  },
  {
    "key": "Sweden",
    "value": 8
  },
  {
    "key": "Japan",
    "value": 10
  },
  {
    "key": "Russia",
    "value": 14
  }
]

最终目标我的目标是：

我试过的到目前为止，我想最重要的是我的代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 3px;
}
</style>
<body>

<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var dataset = [
  {
    "key": "Brazil",
    "value": 2
  },
  {
    "key": "Denmark",
    "value": 4
  },
  {
    "key": "Sweden",
    "value": 8
  },
  {
    "key": "Japan",
    "value": 10
  },
  {
    "key": "Russia",
    "value": 14
  }
];


// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// set the ranges
var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// define the line
var valueline = d3.line()
    .x(function(d) { return x(width / dataset.length); })
    .y(function(d) { return y(d.value); });

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").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 + ")");


function draw(data) {

    data.forEach(function(d) {
        d.key = d.key.toString();
        d.value = +d.value;
    });

    data.sort(function(a, b){
      return a["value"]-b["value"];
    })

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

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

  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  // Add the Y Axis
  svg.append("g")
      .call(d3.axisLeft(y));
  }

  // trigger render
  draw(dataset);

</script>
</body>


/*设置CSS*/
.线路{
填充：无；
笔画：钢蓝；
笔画宽度：3px；
}
变量数据集=[
{
“关键”：“巴西”，
“价值”：2
},
{
“钥匙”：“丹麦”，
“价值”：4
},
{
“关键”：“瑞典”，
“价值”：8
},
{
“关键”：“日本”，
“价值”：10
},
{
“关键”：“俄罗斯”，
“价值”：14
}
];
//设置图形的尺寸和边距
var margin={顶部：20，右侧：20，底部：30，左侧：50}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
//设定范围
var x=d3.scaleLinear（）.range（[0，width]）；
变量y=d3.scaleLinear（）.range（[height，0]）；
//界定界线
var valueline=d3.line（）
.x（函数（d）{return x（width/dataset.length）；}）
.y（函数（d）{返回y（d.value）；}）；
//将svg对象附加到页面主体
//将“组”元素附加到“svg”
//将“组”元素移动到左上角
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
函数图（数据）{
data.forEach（函数（d）{
d、 key=d.key.toString（）；
d、 值=+d.值；
});
数据排序（函数（a，b）{
返回a[“value”]-b[“value”]；
})
//缩放数据的范围
x、 域（d3.extent（数据，函数（d）{d.key；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.value；}）]；
//添加valueline路径。
追加（“路径”）
.数据（数据）
.attr（“类”、“行”）
.attr（“d”，valueline）；
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加Y轴
svg.append（“g”）
.调用（d3.左（y））；
}
//触发渲染
绘制（数据集）；

我认为问题在哪里该代码是我在过去几天看到的几个示例的合并，但是它们似乎都针对只包含数字和/或日期的数据模型，例如沿

轴的日期和沿

轴的值

X和Y变量/函数

因此，我认为代码没有生成图形的原因之一是

和

变量的声明方式。我已经阅读了API参考资料，但这并没有使我成功

Valueline变量/函数

一般来说，我认为这看起来不错，但是因为它使用了上面提到的x&y函数（我不完全理解），我不能确定

设置域

我认为这是使用各种不同示例的另一个遗留问题，这些示例是针对不同的数据模型定制的，但我不确定

总结

因此，我认为有几个区域导致我的图表只显示X&Y轴，但是花了相当长的时间试图更好地理解d3（使用似乎没有帮助的示例），我想我应该转向stackoverflow。如果你们能给我指点，那就太好了

当前方法的主要问题是，x轴包含一个分类的（定性）变量，而不是一个连续的（定量）变量
也就是说，您必须选择适当的比例，例如点比例：

var x = d3.scalePoint() .range([0, width]) .domain(data.map(function(d) { return d.key; }));
然后，在线路生成器中使用
d.key
最后，使用
数据
附加
，而不是
数据
下面是这些更改的代码（以及较小的SVG）：

var数据集=[{ “关键”：“巴西”， “价值”：2 }, { “钥匙”：“丹麦”， “价值”：4 }, { “关键”：“瑞典”， “价值”：8 }, { “关键”：“日本”， “价值”：10 }, { “关键”：“俄罗斯”， “价值”：14 } ]; //设置图形的尺寸和边距 var保证金={ 前20名，右:20,，底数：30，左：50 }, 宽度=600-边距。左侧-边距。右侧，高度=400-margin.top-margin.bottom； //设定范围 var x=d3.scalePoint（）.range（[0，width]）；变量y=d3.scaleLinear（）.range（[height，0]）； //界定界线 var valueline=d3.line（） .x（功能（d）{ 返回x（d键）； }) .y（功能（d）{ 返回y（d值）； }); //将svg对象附加到页面主体 //将“组”元素附加到“svg” //将“组”元素移动到左上角 var svg=d3.选择（“正文”）.追加（“svg”） .attr（“宽度”，宽度+边距。左侧+边距。右侧） .attr（“高度”，高度+边距。顶部+边距。底部） .附加（“g”） .attr（“转换”， “翻译（“+margin.left+”，“+margin.top+”）；函数图（数据）{ data.forEach（函数（d）{ d、值=+d.值； }); 数据排序（函数（a，b）{ 返回a.value-b.value； }) //缩放数据的范围 x、域（data.map）（函数（d）{ 返回d.key； })); y、域（[0，d3.max（数据，函数（d））{ 返回d值； })]); //添加valueline路径。追加（“路径”） .基准（数据） .attr（“类”、“行”） .attr（“d”，valueline）； svg.append（“g”） .attr（“变换”、“平移（0）”、“高度+”） .call（d3.axisBottom（x））； //添加Y轴 svg.append（“g”） .调用（d3.左（y））； } //触发渲染绘制（数据集） .line{ 填充：无；笔画：钢蓝；笔画宽度：3px； }