gpt4 book ai didi

javascript - 如何调整我的 d3.js 脚本的大小?有没有办法将其放入 div 标记中,以便我可以将条形图调整得更小?

转载 作者:行者123 更新时间:2023-11-29 19:04:46 30 4
gpt4 key购买 nike

我无法在脚本标签内调整条形图的大小。目前,条形聊天在页面上显示得很大,我想在页面上将图表调整为较小的尺寸。

有没有办法使用 CSS 或 JavaScript 调整它的大小或将它放入 Div 中?我试图给脚本标签一个“id”或“值”,但没有成功。

有人可以帮我调整图表的大小吗。

这是我的 d3.js:

<script>

data = [
{label:"Jan Sales", value:35},
{label:"XMAS", value:5},

];

var div = d3.select("body").append("div").attr("class", "toolTip");

var axisMargin = 20,
margin = 40,
valueMargin = 4,
width = parseInt(d3.select('body').style('width'), 10),
height = parseInt(d3.select('body').style('height'), 10),
barHeight = (height-axisMargin-margin*2)* 0.2/data.length,
barPadding = (height-axisMargin-margin*2)*0.6/data.length,
data, bar, svg, scale, xAxis, labelWidth = 0;

max = d3.max(data, function(d) { return d.value; });

svg = d3.select('body')
.append("svg")
.attr("width", width)
.attr("height", height);


bar = svg.selectAll("g")
.data(data)
.enter()
.append("g");

bar.attr("class", "bar")
.attr("cx",0)
.attr("transform", function(d, i) {
return "translate(" + margin + "," + (i * (barHeight + barPadding) + barPadding) + ")";
});

bar.append("text")
.attr("class", "label")
.attr("y", barHeight / 2)
.attr("dy", ".35em") //vertical align middle
.text(function(d){
return d.label;
}).each(function() {
labelWidth = Math.ceil(Math.max(labelWidth, this.getBBox().width));
});

scale = d3.scale.linear()
.domain([0, max])
.range([0, width - margin*2 - labelWidth]);

xAxis = d3.svg.axis()
.scale(scale)
.tickSize(-height + 2*margin + axisMargin)
.orient("bottom");

bar.append("rect")
.attr("transform", "translate("+labelWidth+", 0)")
.attr("height", barHeight)
.attr("width", function(d){
return scale(d.value);
});

bar.append("text")
.attr("class", "value")
.attr("y", barHeight / 2)
.attr("dx", -valueMargin + labelWidth) //margin right
.attr("dy", ".35em") //vertical align middle
.attr("text-anchor", "end")
.text(function(d){
return (d.value+"%");
})
.attr("x", function(d){
var width = this.getBBox().width;
return Math.max(width + valueMargin, scale(d.value));
});

bar
.on("mousemove", function(d){
div.style("left", d3.event.pageX+10+"px");
div.style("top", d3.event.pageY-25+"px");
div.style("display", "inline-block");
div.html((d.label)+"<br>"+(d.value)+"%");
});
bar
.on("mouseout", function(d){
div.style("display", "none");
});

svg.insert("g",":first-child")
.attr("class", "axisHorizontal")
.attr("transform", "translate(" + (margin + labelWidth) + ","+ (height - axisMargin - margin)+")")
.call(xAxis);

</script>

这是我的 CSS:

    svg {
width: 100%;
height: 100%;
position: center;
}

.toolTip {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: absolute;
display: none;
width: auto;
height: auto;
background: none repeat scroll 0 0 white;
border: 0 none;
border-radius: 8px 8px 8px 8px;
box-shadow: -3px 3px 15px #888888;
color: black;
font: 12px sans-serif;
padding: 5px;
text-align: center;
}

text {
font: 15px sans-serif;
color: white;
}
text.value {
font-size: 100%;
fill: white;
}

.axisHorizontal path{
fill: none;
}

.axisHorizontal .tick line {
stroke-width: 1;
stroke: rgba(0, 0, 0, 0.2);
}

.bar {
fill: steelblue;
fill-opacity: .9;
font-size: 120%;
}
#search {



position:absolute;
top: -2%;
}
.tablebad thead tr {
background-color: #eee;
}

.tablegood thead tr th {
background-color: #eee;
}

最佳答案

viewBox 属性添加到 svg 元素。这将允许您使用 min-xmin-ywidth 将 svg 锁定到图形的精确尺寸height 参数。

然后您可以调整 svg 元素的大小,您的图形将拉伸(stretch)以变大或变小。

https://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute

编辑:这是更新为使用 viewBox 的 js fiddle 。我已经注释掉了 width 和 height 属性,这样它会随着页面变宽或变窄而调整大小。

https://jsfiddle.net/cexLbfnk/1/

这是您正在寻找的那种东西吗?

关于javascript - 如何调整我的 d3.js 脚本的大小?有没有办法将其放入 div 标记中,以便我可以将条形图调整得更小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43799729/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com