Using javascript and d3.js to display a set number of items on each line through printing

Question

Using javascript and d3.js to display a set number of items on each line through printing

I'm currently working on a project that involves printing a specific number of rectangles per line using d3.js

        var rectangle = svgContainer.selectAll("rect").data(data).enter().append("rect")
       .attr("x", function(d,i){ return i*5})
       .attr("y", function(d,i){ return i+1})
       .attr("width", 50)
       .attr("height", 50)

While I understand that I need to adjust the y attribute, I find myself guessing the values until the rectangles align as I envision them, like

 [][][][][][]
 [][][][][][]
 [][][][][][]

instead of

      [[][[][[[][[][[][[]

or

Could someone provide guidance on how to create a formula to achieve the desired layout?

Thank you in advance

javascript html css d3.js

Answer 1

Answer №1

Here's an example of how you can achieve this effect:

    const squares = svgContainer.selectAll("rect").data(data).enter().append("rect")
       .attr("x", (d, i) => (i % 5) * 60)
       .attr("y", (d, i) => Math.floor(i / 5) * 60)
       .attr("width", 50)
       .attr("height", 50)

By setting the width and height of the rectangles to 50, a gap of 60 will be maintained between each rectangle. Decreasing the width or height below 50 will result in overlapping rectangles.

The % symbol represents the remainder operator, which calculates the remainder after division by 5.

Answer 2

Here's an example of how you can achieve this effect:

    const squares = svgContainer.selectAll("rect").data(data).enter().append("rect")
       .attr("x", (d, i) => (i % 5) * 60)
       .attr("y", (d, i) => Math.floor(i / 5) * 60)
       .attr("width", 50)
       .attr("height", 50)

By setting the width and height of the rectangles to 50, a gap of 60 will be maintained between each rectangle. Decreasing the width or height below 50 will result in overlapping rectangles.

The % symbol represents the remainder operator, which calculates the remainder after division by 5.

Using javascript and d3.js to display a set number of items on each line through printing

Answer №1

Similar questions

When the CSS is rendered, it automatically appends a forward slash

Guide to modifying the root directory when deploying a Typescript cloud function from a monorepo using cloud build

What causes objects to intersect in A-Frame even when they are seemingly distanced from each other?

HTML validation produces mistakes

I encounter a black screen issue while attempting to rotate a three.js cube

Unable to locate node module when using Npm.require

Using Redux to Implement Conditional Headers in ReactJS

How can you verify the anticipated log output in the midst of a function execution with Jest unit testing?

Mastering the art of creating an authentic carbon fiber CSS background

Utilize the bootstrap grid to align content into 4 columns evenly

The Iframe on the webpage is automatically refreshing once a submission is made, which is not a feature present in the original version of

Trouble with the mobile layout - styling with CSS

What is the best way to include a JavaScript variable within CSS styling?

"Utilizing a function from an external file within the Main App function - a step-by-step guide

How do I go about adding a specific class to every row within a Vue.js table?

Tips for Properly Positioning Floating Pop-Up Messages Using CSS and jQuery

Adding extra fields to an existing JSON response in a TypeScript REST API

Top method for organizing Vue JS elements

Utilizing CSS for fixed positioning and media queries

The challenges of utilizing breakpoints effectively within Tailwind CSS