Javascript D3中的有序散点图

我正在尝试使用D3.js重新创建此图，但遇到了一些问题

我对D3非常陌生，我还没有找到带有序数值的散点图的例子。在y轴上同时包含正值和负值也有问题。我使用了一个条形图的例子，结果非常接近，但是这些点并没有在轴刻度上居中，并且图中完全没有负值

我使用的是编造的数据，但是点应该在“值”上，线应该从最小值到最大值。显然，我的方法有几个问题

var plot_data = [
    [{Phenotype: 'TG', value: 0.01, min: -0.1, max: 0.4},
    {Phenotype: 'LDL', value: -0.29, min: -0.5, max: -0.1},
    {Phenotype: 'HDL', value: 0.41, min: 0.0, max: 0.5},
    {Phenotype: 'TC', value: 0.07, min: -0.2, max: 0.4}]];

如果有人能给我举一个类似的例子，我将不胜感激

<script>

var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom ;
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("middle");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(4);

var svg = d3.select("#cluster_".concat("{{ n }}")).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 + ")");

var plot_data = [
    [{Phenotype: 'TG', value: 0.01, min: -0.1, max: 0.4},
    {Phenotype: 'LDL', value: -0.29, min: -0.5, max: -0.1},
    {Phenotype: 'HDL', value: 0.41, min: 0.0, max: 0.5},
    {Phenotype: 'TC', value: 0.07, min: -0.2, max: 0.4}]];

plot_data.forEach(function(data){
  x.domain(data.map(function(d) { return d.Phenotype; }));
  y.domain([0, d3.max(data, function(d) { return d.value; })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" );

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")

  svg.selectAll("scatter-dots")
      .data(data)
    .enter().append("svg:circle")
      .style("fill", "steelblue")
      .attr("cx", function(d) { return x(d.Phenotype); })

      .attr("cy", function(d) { return y(d.value); })
      .attr("r", 8);

    svg.selectAll("bar")
        .data(data)
      .enter().append("rect")
        .style("fill", "steelblue")
        .attr("x", function(d) { return x(d.Phenotype); })
        .attr("width", 1)
        .attr("y1", function(d) { return y(d.min); })
        .attr("y2", function(d) { return y(d.max); })
        .attr("height", function(d) { return Math.abs(y(d.max) - y(d.min));});
</script>

var margin={顶部：20，右侧：20，底部：70，左侧：40}，
宽度=600-边距。左侧-边距。右侧，
高度=300-margin.top-margin.bottom；
var x=d3.scale.ordinal（）.rangeRoundBands（[0，宽度]，.05）；
变量y=d3.scale.linear（）.range（[height，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“中”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.蜱（4）；
var svg=d3.select（“#cluster_u2;”.concat（“{{n}”））.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
变量绘图数据=[
[{表型：'TG'，值：0.01，最小值：-0.1，最大值：0.4}，
{表型：'LDL'，值：-0.29，最小值：-0.5，最大值：-0.1}，
{表型：'HDL'，值：0.41，最小值：0.0，最大值：0.5}，
{表型：'TC'，值：0.07，最小值：-0.2，最大值：0.4}]；
plot_data.forEach（函数（数据））{
x、 域（data.map（函数（d）{return d.epotype；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.value；}）]；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）
.selectAll（“文本”）
.style（“文本锚定”、“结束”）
.attr（“dx”，“-.8em”）
.attr（“dy”，“-.55em”）
.attr（“变换”、“旋转（-90）”）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
svg.selectAll（“散点”）
.数据（数据）
.enter（）.append（“svg:circle”）
.样式（“填充”、“钢蓝”）
.attr（“cx”，函数（d）{返回x（d.表型）；}）
.attr（“cy”，函数（d）{返回y（d.value）；}）
.attr（“r”，8）；
svg.selectAll（“条”）
.数据（数据）
.enter（）.append（“rect”）
.样式（“填充”、“钢蓝”）
.attr（“x”，函数（d）{返回x（d.表型）；}）
.attr（“宽度”，1）
.attr（“y1”，函数（d）{返回y（d.min）；}）
.attr（“y2”，函数（d）{返回y（d.max）；}）
.attr（“高度”，函数（d）{返回数学.abs（y（d.max）-y（d.min））；}；

---

以前已经发布过，但似乎没有解决。

您有一些问题需要解决，但您走上了正确的道路。我建议您查看一些优秀的在线资源。特别是

您的

plot\u数据

数组应该是对象数组，而不是带有数组的数组

此循环是不必要的-d3的一个要点是，它具有“连接”，在许多情况下会取代循环：

plot_data.forEach（函数（数据）{…}

看看这个fiddle-jsfiddle是一个很好的实验代码、慢慢学习和构建项目的地方

嗯…Stackoverflow现在有了自己的“小提琴”功能！这是相同的代码

var svg=d3.select（'body'）.append（'svg'））
svg.attr（'width'，300）.attr（'height'，300）
svg.append（'g'）.attr（'class'，'axis x-axis'））
svg.append（'g'）.attr（'class'，'axis y-axis'））
变量绘图数据=[
{表型：'TG'，值：0.01，最小值：-0.1，最大值：0.4}，
{表型：'LDL'，值：-0.29，最小值：-0.5，最大值：-0.1}，
{表型：'HDL'，值：0.41，最小值：0.0，最大值：0.5}，
{表型：'TC'，值：0.07，最小值：-0.2，最大值：0.4}]；
var xScale=d3.scalePoint（）
.domain（['TG'，'LDL'，'HDL'，'TC']）
.范围（[30290]）
var yScale=d3.scaleLinear（）
.domain（[-1，1]）
.范围（[290,30]）
var xAxis=d3.axisBottom（xScale）；
var yAxis=d3.axisRight（yScale）；
svg.select（'.x-axis'）.call（xAxis）；
svg.select（'.y轴'）.call（yAxis）；
var circles=svg.append（'g'）
.selectAll（“.circle”）
.数据（绘图数据）
.输入（）
.append（'圆'）
.attr（'class'，'circle'）
.attr（'cx'，函数（d）{return xScale（d.epotype）；}）
.attr（'cy'，函数（d）{返回yScale（d.value）；}）
.attr（'r'，5）
.attr（'fill'，'red'）
var-eWidth=2；
var errbars=svg.append（'g'）
.selectAll（“.errbar”）
.数据（绘图数据）
.输入（）
.append（'rect'）
.attr（'class'，'errbar'）
.attr（'x'，函数（d）{return xScale（d.epotype）-eWidth/2；}）
.attr（'y'，函数（d）{返回yScale（d.max）；}）
.attr（“宽度”，宽度）
.attr（'height'，函数（d）{返回yScale（d.min）-yScale（d.max）；}）

这不是工作代码。请发布创建第二幅图像的代码，以便我们只能处理x轴定位和负值。