Can anyone help me with adding a striped table-like background to my chart? I want to have alternating colors for each y-axis block.
Is there a way to dynamically set the regions for each y-axis block? Once I can do this, I can easily use CSS to achieve the alternating background colors.
If you want to set the regions statically, you can do it like this:
To set them dynamically, you just need to utilize the API: for example.
chart.regions([
{axis: 'x', start: 5, class: 'regionX'},
{axis: 'y', end: 50, class: 'regionY'}
]);
To create alternating stripes, construct a regions array in the following way after creating your chart object:
// Determine range of all data
var allData = d3.merge (chart.data().map(function(d) {
return d.values.map (function(dd) { return dd.value; });
}));
var dataRange = d3.extent(allData);
dataRange.min = Math.min (dataRange[0], 0);
dataRange.extent = dataRange[1] - dataRange.min;
// Set number of pairs of stripes
var stripeCount = 5;
var step = dataRange.extent / stripeCount;
var newRegions = [];
// Divide the data range into pairs of stripes
d3.range(0,stripeCount).forEach (function(d) {
newRegions.push ({axis: 'y', start: dataRange.min+(step*d), end: dataRange.min+(step*(d+0.5)), class: 'stripe1'});
newRegions.push ({axis: 'y', start: dataRange.min+(step*(d+0.5)), end: dataRange.min+(step*(d+1)), class: 'stripe2'});
});
// Apply the newly created regions to the chart object
chart.regions(newRegions);
CSS styling:
.c3-region.stripe1 {
fill: #f00;
}
.c3-region.stripe2 {
fill: #0f0;
}
(Alternatively, if you prefer to add a new stripe pair every 10 units on the y scale, simply set step=10; and adjust the d3.range to
d3.range(0,dataRange.extent/step)I modified someone's bar chart on jsfiddle by adding stripes --> http://jsfiddle.net/k9c0peax/
My goal is to implement a corner circle menu, similar to the one shown in the image below: https://i.stack.imgur.com/zma5U.png This is what I have accomplished so far: $(".menu").click(function(){ $(".menu-items").fadeToggle(); }); html,body{ colo ...
I'm currently developing a simple editor for Three.js. My goal is to enable the rotation, movement, and scaling of objects with ease. While utilizing the basic functions gets the job done, I find it slightly perplexing at times. cube.rotation.z = Ma ...
I need to round up a number in my input field: <b-form-input id="amount_input" type="number" v-model="Math.ceil(form.contract.reward_cents / 100)" :state="validate(form.contract.reward_cents)"/> ...
Can I detect the addition of a specific CSS class to an element without having to create a new event? ...
I made some changes to my Microsoft logo animation project. You can view the updated version on CodePen. Overall, I'm pretty happy with how it turned out except for one issue. I'm struggling to determine the right timing to end the animation so ...
Trying to handle data (id) retrieved from the database and stored in a button, which appears in a modal like this: https://i.sstatic.net/i0boj.png There are buttons for "Add" and "Remove", but the "Remove" button is hidden. What I want to achieve: When ...
Encountering a problem where the metric has already been registered when attempting to publish metrics from a service. To work around this issue, the register.removeSingleMetric("newMetric"); method was used. However, this method clears the register and pa ...
In the index.php view, you will find my table located <table class="striped"> <thead> <tr> <th>Id</th> <th>Name</th> <th ...
I have set up an AJAX request within a JavaScript function. By using the setInterval method, this AJAX function runs every 5000 milliseconds. I am curious if there is a way to determine if the previous AJAX call is still in progress to prevent multiple si ...
I am hoping to develop a three.js plane with a higher number of points than the default setup. This means I won't be using PlaneGeometry since it doesn't allow me to define custom points. My goal is to have the flexibility to animate or move any ...
I am facing an issue with filtering a table containing student details retrieved from a database using v-for. I am attempting to filter the table based on a specific field value. To begin with, I have three input fields located above the table, each bound ...
Having trouble accessing the scope attribute fullName from the controller method login. What could be causing this issue? App.controller('LoginController', ['$scope', 'LoginService', '$location', function(scope, Log ...
Currently, I am utilizing the Visual Studio Online API to retrieve branch statistics by repository. To achieve this, I have incorporated nested asynchronous calls. My choice of resolving GET requests is through using request-promise. The challenge I am en ...
Is there a way to detect when Firefox (or any browser) is blocking mixed content using JavaScript or jQuery? To learn more about Firefox's mixed content blocking feature, visit: The backstory: My company has an external vendor that handles the onli ...
Hey there, I'm having an issue centering my image when I add instructions for it to tilt on mouseover. If I take out the 'tilt pic' div, the image centers just fine. Can anyone help me identify what I might be doing wrong? Thanks in advance! ...
Can the functionality of a Bootstrap Select Dropdown menu be changed to act like a Tab List? Specifically, I would like the content in the Select to change based on the user's selection from the <option> value. While there is a bootstrap-select ...
Index.html <script> let bar = 1; </script> This html page is being loaded multiple times on the page using AJAX: article.html <script> if (bar === 1) { // perform a task } // Error: bar is not defined </script> Bar is a simple ...
I'm currently developing a react application and utilizing the MUI Datagrid to present some data. I have incorporated a rendercell to insert an edit icon which should trigger a pop-up modal when clicked. Below is the column setup. export const specifi ...
Is it possible to programmatically send the window to #anchor_box when results are available at the end of an observeEvent() with a long running time, instead of relying on the user clicking on a link like a("Go to Results", href = '#anchor_box') ...
I have a function in my application that requires an object as one of its parameters: const checkValues = { promoId: ..., ... unsaved: !JSON.parse(localStorage.getItem('unsaved')) ? [] : JSON.parse(localStorage.getItem('unsaved') ...