如何在d3.js中为一行中的每列绘制矩形
我想为json中的每个属性绘制4个不同的矩形。因此，我需要为每个id绘制4个矩形。在下面的示例中，我将为id 1-4绘制16个矩形 矩形的宽度和高度现在是硬编码的。还有x轴和y轴 目前它将每一行作为一个矩形 我有如下json数据：如何在d3.js中为一行中的每列绘制矩形,d3.js,D3.js,我想为json中的每个属性绘制4个不同的矩形。因此，我需要为每个id绘制4个矩形。在下面的示例中，我将为id 1-4绘制16个矩形 矩形的宽度和高度现在是硬编码的。还有x轴和y轴 目前它将每一行作为一个矩形 我有如下json数据： [ [{ "checkins":10},{"builds":11},{"oss":1},{"appsec":10},{"id":1}], [{ "checkins":1},{"builds":1},{"oss":21},{"appsec":10},{"id
[
[{ "checkins":10},{"builds":11},{"oss":1},{"appsec":10},{"id":1}],
[{ "checkins":1},{"builds":1},{"oss":21},{"appsec":10},{"id":2}],
[{ "checkins":11},{"builds":3},{"oss":11},{"appsec":10},{"id":3}],
[{ "checkins":21},{"builds":20},{"oss":3},{"appsec":30},{"id":4}]
]
var x_axis = 1;
var y_axis = 45;
var xvar;
var yvar;
var x;
d3.json("GraphData.json", function(data)
{
var rectangle= svggraph.selectAll("rect").data(data).enter().append("rect");
var RectangleAttrb = rectangle
.attr("id", function (d,i) { return "id" + i ; })
.attr("x", function (d,i)
{
xvar=i+1;
if(i==0) return x_axis=0;
if ((i > 0) && (xvar%4==1))
{
x_axis = 0;
}
else
{
x_axis=x_axis+22;
}
//y=i+1;
return x_axis;
})
.attr("y", function (d,i)
{
Yvar=i+1;
if ((i > 0) && (Yvar%4==1))
{
y_axis = y_axis+ 30;
}
return y_axis;
})
.attr("width",function(d) { return 20; } )
.attr("height",function(d) { return 15; })
.style("stroke", function (d) { return "black";})
.style("fill", function(d) { console.log(d);return "white"; });
});
它仍然只创建了4个矩形我找到了一个解决方案。它创建了一个数组，并在其中循环以创建矩形，并指定x和y轴以及高度和宽度
<html>
<script>
var x_axis = 1;
var y_axis = 45;
var x;
var rectangle,RectangleAttrb;
var rect;
var rectdata;
createtinderboxes();
function createtinderboxes()
{
//console.log(" the function is called ");
d3.json("GraphData.json", function(data)
{
rectdata = data;
//console.log(rectdata.length);
for(x=0;x<rectdata.length;x++)
{
console.log(rectdata[x]);
for (index=0;index<5; index++)
{
svggraph.append("rect")
.attr("x", assignxaxis(rectdata, index))
.attr("y", assignyaxis(rectdata,yvar))
.attr("width", 20)
.attr("height", 25)
.style("fill","white")
.style("stroke","black");
}
yvar = yvar+26;
}
});
}
function assignxaxis(rectdata,x)
{
console.log(rectdata[x]);
if (x==4) return;
if(x==0)
{
return x_axis=0
}
else
{
x_axis=x_axis+22;
}
return x_axis;
}
function assignyaxis(rectdata,y)
{
return y;
}
</script>
</html>
var x_轴=1；
变量y_轴=45；
var x；
变量矩形，矩形属性b；
var-rect；
var-rectdata；
createTinderBox（）；
函数createTinderBox（）
{
//log（“调用函数”）；
d3.json（“GraphData.json”），函数（数据）
{
数据=数据；
//console.log（rectdata.length）；
对于（x=0；xWhat确定矩形的位置和尺寸？到目前为止，它只是硬编码的值…还不完全清楚您想对我做什么，但可能会有所帮助。我检查了链接。这不是我想做的。我将尝试使用不同的选项。重点是，如果您的JSON看起来像这样会更容易：[{“x”：10}，{“y”：3}，{“z”：4}，{“k”：3}，{“id”：1}]，…]
。