搜索
搜索

如何在D3条形图中限制最大宽度

Ruchita 发表于 Dev
92
留田

我是d3条形图的新手，下面是我想在项目中使用的条形图代码。

我只是想知道如何限制条形图的最大宽度，因为当我只有一条记录时，条形图的宽度会变得非常大，实际上，该条形图占据了整个宽度，然后图形看起来就不好了。d3中有什么方法可以限制每个条的最大宽度。

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 12px Arial;}
path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}
.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
.legend {
    font-size: 16px;
    font-weight: bold;
    text-anchor: middle;
}
</style>
<body>
<div id="d3id" ></div>
<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v4.min.js"></script>

<script>
    var models = [
        {
            "model_name":"http://www.test.com",
            "field1":19,
            "field2":83
        },
        {
            "model_name":"http://www.test2.com",
            "field1":67,
            "field2":93
        },
        {
            "model_name":"http://www.test3.com",
            "field1":10,
            "field2":56
        },
        {
            "model_name":"http://www.test4.com",
            "field1":98,
            "field2":43
        },

        {
            "model_name":"http://www.test.com",
            "field1":19,
            "field2":83
        },
        {
            "model_name":"f7",
            "field1":67,
            "field2":93
        },
        {
            "model_name":"f8",
            "field1":10,
            "field2":56
        },
        {
            "model_name":"f9",
            "field1":98,
            "field2":43
        }
    ];
    models = models.map(i => {
        i.model_name = i.model_name;
        return i;
    });

    var container = d3.select('#d3id'),
        width = 500,
        height = 300,
        margin = {top: 30, right: 20, bottom: 30, left: 50},
        barPadding = .3,
        axisTicks = {qty: 5, outerSize: 0, dateFormat: '%m-%d'};

    var svg = container
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`);

    var xScale0 = d3.scaleBand().range([0, width - margin.left - margin.right]).padding(barPadding);
    var xScale1 = d3.scaleBand();
    var yScale = d3.scaleLinear().range([height - margin.top - margin.bottom, 0]);

    var xAxis = d3.axisBottom(xScale0).tickSizeOuter(axisTicks.outerSize);
    var yAxis = d3.axisLeft(yScale).ticks(axisTicks.qty).tickSizeOuter(axisTicks.outerSize);

    xScale0.domain(models.map(d => d.model_name));
    xScale1.domain(['field1', 'field2']).range([0, xScale0.bandwidth()]);
    yScale.domain([0, d3.max(models, d => d.field1 > d.field2 ? d.field1 : d.field2)]);

    var model_name = svg.selectAll(".model_name")
        .data(models)
        .enter().append("g")
        .attr("class", "model_name")
        .attr("transform", d => `translate(${xScale0(d.model_name)},0)`);

    /* Add field1 bars */
    model_name.selectAll(".bar.field1")
        .data(d => [d])
        .enter()
        .append("rect")
        .attr("class", "bar field1")
        .style("fill","#4267b2")
        .attr("x", d => xScale1('field1'))
        .attr("y", d => yScale(d.field1))
        .attr("width", xScale1.bandwidth())
        .attr("height", d => {
            return height - margin.top - margin.bottom - yScale(d.field1)
        });

    /* Add field2 bars */
    model_name.selectAll(".bar.field2")
        .data(d => [d])
        .enter()
        .append("rect")
        .attr("class", "bar field2")
        .style("fill","#69b3a2")
        .attr("x", d => xScale1('field2'))
        .attr("y", d => yScale(d.field2))
        .attr("width", xScale1.bandwidth())
        .attr("height", d => {
            return height - margin.top - margin.bottom - yScale(d.field2)
        });

    // Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", `translate(0,${height - margin.top - margin.bottom})`)
        .call(xAxis);

    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

</script>
</body>

另外，如何调整标签以使其合适？请帮我。

王子

您可以通过操作附加矩形的width属性来轻松实现这一点。

在这里，我正在检查矩形的宽度是否大于width / 10（500/10），然后保持50的恒定值，否则使用默认值。您可以使用任何逻辑进行操作。

.attr("width", function(d) {
  return xScale1.bandwidth() > width/10 ? width/10 : xScale1.bandwidth();
})

请在下面找到工作清单：

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 12px Arial;}
path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}
.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
.legend {
    font-size: 16px;
    font-weight: bold;
    text-anchor: middle;
}
</style>
<body>
<div id="d3id" ></div>
<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v4.min.js"></script>

<script>
    var models = [
        {
            "model_name":"http://www.test.com",
            "field1":19,
            "field2":83
        },
/*         {
            "model_name":"http://www.test2.com",
            "field1":67,
            "field2":93
        },
        {
            "model_name":"http://www.test3.com",
            "field1":10,
            "field2":56
        },
        {
            "model_name":"http://www.test4.com",
            "field1":98,
            "field2":43
        },
        
        {
            "model_name":"http://www.test.com",
            "field1":19,
            "field2":83
        },
        {
            "model_name":"f7",
            "field1":67,
            "field2":93
        },
        {
            "model_name":"f8",
            "field1":10,
            "field2":56
        },
        {
            "model_name":"f9",
            "field1":98,
            "field2":43
        } */
    ];
    models = models.map(i => {
        i.model_name = i.model_name;
        return i;
    });

    var container = d3.select('#d3id'),
        width = 500,
        height = 300,
        margin = {top: 30, right: 20, bottom: 30, left: 50},
        barPadding = .3,
        axisTicks = {qty: 5, outerSize: 0, dateFormat: '%m-%d'};

    var svg = container
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`);

    var xScale0 = d3.scaleBand().range([0, width - margin.left - margin.right]).padding(barPadding);
    var xScale1 = d3.scaleBand();
    var yScale = d3.scaleLinear().range([height - margin.top - margin.bottom, 0]);

    var xAxis = d3.axisBottom(xScale0).tickSizeOuter(axisTicks.outerSize);
    var yAxis = d3.axisLeft(yScale).ticks(axisTicks.qty).tickSizeOuter(axisTicks.outerSize);

    xScale0.domain(models.map(d => d.model_name));
    xScale1.domain(['field1', 'field2']).range([0, xScale0.bandwidth()]);
    yScale.domain([0, d3.max(models, d => d.field1 > d.field2 ? d.field1 : d.field2)]);

    var model_name = svg.selectAll(".model_name")
        .data(models)
        .enter().append("g")
        .attr("class", "model_name")
        .attr("transform", d => `translate(${xScale0(d.model_name)},0)`);

    /* Add field1 bars */
    model_name.selectAll(".bar.field1")
        .data(d => [d])
        .enter()
        .append("rect")
        .attr("class", "bar field1")
        .style("fill","#4267b2")
        .attr("x", d => xScale1('field1'))
        .attr("y", d => yScale(d.field1))
        .attr("width", xScale1.bandwidth())
        .attr("height", d => {
            return height - margin.top - margin.bottom - yScale(d.field1)
        });

    /* Add field2 bars */
    model_name.selectAll(".bar.field2")
        .data(d => [d])
        .enter()
        .append("rect")
        .attr("class", "bar field2")
        .style("fill","#69b3a2")
        .attr("x", d => xScale1('field2'))
        .attr("y", d => yScale(d.field2))
        .attr("width", function(d) {
          return xScale1.bandwidth() > width/2 ? width/4 : xScale1.bandwidth();
        })
        .attr("height", d => {
            return height - margin.top - margin.bottom - yScale(d.field2)
        });

    // Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", `translate(0,${height - margin.top - margin.bottom})`)
        .call(xAxis);

    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

</script>
</body>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在d3条形图中的单个条形中添加值

D3条形图中的链接

如何在Chartjs 2条形图中修改条形宽度

否则响应的已分组d3条形图中的无响应条形

如何在D3的条形图中的条形图中添加文本图例？

d3条形图中组内的轴文本旋转

D3条形图中的过渡不起作用

无法在D3条形图/折线图中显示折线

D3条形图中缺少矩形对象

带点的D3条形图背景

JavaScript，D3条形图错误

D3条形图-如何同时显示正/负值？

D3：如何在分组条形图中的每个条形上方添加标签

d3条形图y轴刻度和高于最大值的网格线

如何使用d3在条形图中添加标记

D3条形图条形颜色比例

如何在D3 JS条形图中查看轴标签和值？

d3 v4如何在条形图中添加数据标签

如何在 D3 条形图中添加分隔符

如何从底部（x轴）向上动画化d3 js v4条形图？

D3条形图X刻度未对齐

D3条形图上带有线的注释

在D3条形图的顶部添加画笔

将X轴与零刻度d3条形图对齐

JavaScript，使用CSV的D3条形图错误

删除D3条形图上的所有其他列标签

FreeCodeCamp.org d3条形图轴对齐测试失败

重新启动D3条形图动画

使用可变长度的新数据更新d3条形图标签

TOP 榜单

  1. 1

    Android Studio Kotlin：提取为常量

  2. 2

    计算数据帧R中的字符串频率

  3. 3

    如何使用Redux-Toolkit重置Redux Store

  4. 4

    http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

  5. 5

    如何使用tweepy流式传输来自指定用户的推文（仅在该用户发布推文时流式传输）

  6. 6

    TreeMap中的自定义排序

  7. 7

    TYPO3：将 Formhandler 添加到新闻扩展

  8. 8

    遍历元素数组以每X秒在浏览器上显示

  9. 9

    在Ubuntu和Windows中，触摸板有时会滞后。硬件问题？

  10. 10

    警告消息：在matrix（unlist（drop.item），ncol = 10，byrow = TRUE）中：数据长度[16]不是列数的倍数[10]>？

  11. 11

    无法连接网络并在Ubuntu 14.04中找到eth0

  12. 12

    将辅助轴原点与主要轴对齐

  13. 13

    我可以ping IPv6但不能ping IPv4

  14. 14

    在Jenkins服务器中使用Selenium和Ruby进行的黄瓜测试失败，但在本地计算机中通过

  15. 15

    提交html表单时为空

  16. 16

    使用C ++ 11将数组设置为零

  17. 17

    如果从DB接收到的值为空，则JMeter JDBC调用将返回该值作为参数名称

  18. 18

    尝试在Dell XPS13 9360上安装Windows 7时出错

  19. 19

    如何在R中转置数据

  20. 20

    无法使用 envoy 访问 .ssh/config

  21. 21

    未捕获的SyntaxError：带有Ajax帖子的意外令牌u

热门标签

归档