Fatal编程技术网
  • javascript/
  • Javascript 添加新数据时D3.JS条形图列偏移量

Javascript 添加新数据时D3.JS条形图列偏移量

javascript html d3.js

Javascript 添加新数据时D3.JS条形图列偏移量,javascript,html,d3.js,javascript-objects,Javascript,Html,D3.js,Javascript Objects,我目前正在使用D3.JS，试图每24小时将其添加到现有图形中。使用类似以下内容的JSON数据： [{"name": "bill", "val": 28}, {"name": "kevin", "val": 46}, {"name": "ryan", "val": 23},{"name": "ville", "val": 56}] 我的Y轴上有一个频率值，X轴上有一个用户名。我想我的placement函数是正确的，但是当添加一个新列时（尽管偏移量应该保持不变），所有列都会移位。目标是能够添加列（

我目前正在使用D3.JS，试图每24小时将其添加到现有图形中。使用类似以下内容的JSON数据：

[{"name": "bill", "val": 28}, {"name": "kevin", "val": 46}, {"name": "ryan", "val": 23},{"name": "ville", "val": 56}]
我的Y轴上有一个频率值，X轴上有一个用户名。我想我的placement函数是正确的，但是当添加一个新列时（尽管偏移量应该保持不变），所有列都会移位。目标是能够添加列（新数据）并将列（rect）保持在正确用户名之上

以下是我当前的工作代码：

    <html>
<head>
  <script type="text/javascript" src="d3.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script type="data/json" src="data.json"></script> 

<style>
#chart rect{
  fill: #4aaeea;
}
#chart text{
  fill: white;
  font: 10px sans-serif;
  text-anchor: end; 
}
.axis text{
  font: 10px sans-serif;
}
.axis path, .axis line{
  fill: none;
  stroke : #fff;
  shape-rendering: crispEdges;
}
body{
  background: #1a1a1a;
  color : #eaeaea;
  padding : 5px;
}
  </style>
  </head>
<body>
    <div id="chart"</div>
<script>
var margin ={top:20, right:30, bottom:30, left:40},
    width=960-margin.left - margin.right, 
    height=500-margin.top-margin.bottom;
// scale to ordinal because x axis is not numerical
var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
//scale to numerical value by height
var y = d3.scale.linear().range([height, 0]);
var chart = d3.select("#chart")  
              .append("svg")  //append svg element inside #chart
              .attr("width", width+(2*margin.left)+margin.right)    //set width
              .attr("height", height+margin.top+margin.bottom);  //set height
var xAxis = d3.svg.axis()
              .scale(x)
              .orient("bottom");  //orient bottom because x-axis will appear below the bars
var yAxis = d3.svg.axis()
              .scale(y)
              .orient("left");
var data;
d3.json("http://localhost:8000/data.json", function(error, data){
  if (error) return console.warn(error);
  x.domain(data.map(function(d){ return d.name}));
  y.domain([0, d3.max(data, function(d){return d.val})]);

  var bar = chart.selectAll("g")
                    .data(data)
                  .enter()
                    .append("g")
                    .attr("transform", function(d, i){
                      return "translate("+x(d.name)+", 0)";
                    });
 console.log(margin.left); 
  bar.append("rect")
      .attr("y", function(d) { 
        return y(d.val); 
      })
      .attr("x", function(d,i){
        return x(margin.left + 2);
      })
      .attr("height", function(d) { 
        return height - y(d.val); 
      })
      .attr("width", Math.min.apply(null, [x.rangeBand()-2, 100]));
      //.attr("width", x.rangeBand());  //set width base on range on ordinal data
  bar.append("text")
      .attr("x", (margin.left * 2.2))
      .attr("y", function(d) { return y(d.val) })
      .attr("dy", ".75em")
      .text(function(d) { return d.val; });

  chart.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate("+margin.left+","+ height+")")        
        .call(xAxis);

  chart.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate("+margin.left+",0)")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Frequency");
});
function type(d) {
    d.name = +d.name; // coerce to number
    return d;
  }
</script>


#图表矩形{
填充：#4aaeea；
}
#图表文本{
填充物：白色；
字体：10px无衬线；
文本锚定：结束；
}
.轴文本{
字体：10px无衬线；
}
.轴路径，.轴线{
填充：无；
冲程：#fff；
形状渲染：边缘清晰；
}
身体{
背景：#1A1A；
颜色：#eaeaea；
填充物：5px；
}

我对包含bar
rect
元素和文本元素的
dx
和
dy
属性的
g
元素的位置属性做了一些调整

希望此工作代码片段对您有所帮助



var保证金={
前20名，
右:30,，
底数：30，
左：40
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
//缩放为序号，因为x轴不是数字轴
var x=d3.scale.ordinal（）.rangeRoundBands（[0，宽度]，.1）；
//按高度缩放到数值
变量y=d3.scale.linear（）.range（[height，0]）；
var图表=d3。选择（“图表”）
.append（“svg”）//在#图表中追加svg元素
.attr（“宽度”，宽度+边距.左+边距.右）//设置宽度
.attr（“高度”，高度+边距。顶部+边距。底部）//设定高度
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）//定向底部，因为x轴将显示在条的下方
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
风险值数据=[{
“姓名”：“账单”，
“val”：28
}, {
“姓名”：“凯文”，
“val”：46
}, {
“姓名”：“ryan”，
“val”：23
}, {
“姓名”：“维尔”，
“val”：56
}];
x、 域（data.map）（函数（d）{
返回d.name
}));
y、 域（[0，d3.max（数据，函数（d））{
返回d.val
})]);
var barWidth=Math.min.apply（null[x.rangeBand（）-2100]）；
变量条=图表。选择全部（“g”）
.数据（数据）
.输入（）
.附加（“g”）
.attr（“转换”，函数（d，i）{
返回“translate（“+x（d.name）+”，“+y（d.val）+”）；
});
附加条（“rect”）
.attr（“y”，0）
.attr（“x”，条宽-10）
.attr（“高度”，功能（d）{
返回高度-y（d.val）；
})
.attr（“宽度”，barWidth）；
附加条（“文本”）
.attr（“x”，条宽-10）
.attr（“y”，0）
.attr（“dx”，线宽/2）
.attr（“dy”，“.75em”）
.文本（功能（d）{
返回d.val；
});
图表.附加（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移”（+margin.left+）、“+height+”）
.呼叫（xAxis）；
图表.附加（“g”）
.attr（“类”、“y轴”）
.attr（“变换”、“平移”（+margin.left+”，0））
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“频率”）；
功能类型（d）{
d、 name=+d.name；//强制为数字
返回d；
}


#图表矩形{
填充：#4aaeea；
}
#图表文本{
填充物：白色；
字体：10px无衬线；
文本锚定：结束；
}
.轴文本{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
冲程：#fff；
形状渲染：边缘清晰；
}
身体{
背景：#1A1A；
颜色：#eaeaea；
填充物：5px；
}




我认为顺序音阶需要一个
域
。。。也许
.domain（data.map（function（d）{return d.name；}））
？而且，你的type函数是无用的（而且相当危险，如果你调用它，它只会从你的数据中删除名称）@tarulen我已经删除了这个函数-谢谢你指出这一点！我确实用json的加载函数包装了我所有的d3代码，对吗？是的，所有需要数据的东西都必须包装到json回调中。如果需要，可以将函数定义保留在外部prefer@tarulen谢谢只是想看看什么是最佳实践。（或者如果这是我问题的根源）我在stackoverflow之外重新创建您的代码段时遇到了问题。这是运行它时的当前状态。唯一的区别是我正在加载一个json文件。还有其他想法吗？当前代码：x轴似乎向左移动了一点（可能是大约40个像素-margin.left）。检查x轴组元素属性的转换是否与代码段中的
.attr（“transform”、“translate（0，“+height+”）”）
相同。以下是我尝试添加新数据值（从json文件中）时得到的结果。我是否正确地附加了？axis group元素与代码片段相匹配——从这里可以看出，我认为这段代码与原始代码之间的主要区别在于使用了
barWidth
，其中在原始文件中有``x（margin.left+2）
。。。当
x`是序数刻度时，它不起作用。@Gilsha您的代码片段似乎显示了x轴的错误位置。所有对象都正确对齐，但x轴也向左偏移。